所以我想制作一个随鼠标移动的背景。背景需要比屏幕大15%左右,效果才会好。我没有使用可平铺的图像。
我试过使用 background-size:115%
但问题是图像是水平的,如果浏览器尺寸不够宽,我们可以看到图像的边缘。
使用 background-size:cover
不起作用,因为没有外部图像,我无法为其设置动画。
使用 width:115%; 的图片height:115%
会使图像不成比例。
我在某处读到,使用绝对位置并在 div 上设置顶部和左侧的动画,该 div 测量 115% 且背景在封面上会对性能不利,因为主体尺寸会重新计算每一帧?
最佳答案
一种可能性是只使用 Z 方向的变换和一些透视。
然后在鼠标移动时使用预期原点
var mouseMove = function(e) {
var elem = document.getElementById('container');
elem.style.perspectiveOrigin = e.pageX +'px ' + e.pageY + 'px';
}
window.onload = function() {
this.addEventListener('mousemove', mouseMove);
}
body, html {
height: 100%;
margin: 0px;
}
#container {
width: 100%;
height: 100%;
position: relative;
perspective: 400px;
}
.inner {
width: 100%;
height: 100%;
position: absolute;
background-image: url(https://static.pexels.com/photos/51021/pexels-photo-51021.jpeg);
background-size: cover;
transform: translateZ(100px);
}
<div id="container">
<div class="inner">
</div>
</div>
关于css - 如何在不失去比例的情况下制作视差全屏背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43901563/