的HTML
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="top"></div>
<div id="bot">
<div id="one"></div>
<div id="two"></div>
<div id="thr"></div>
<div id="fou"></div>
</div>
<script src="test.js"></script>
</body>
</html>
的CSS
#top {
height: 100vh;
}
#bot {
width: 100vw;
height: 100vh;
display: flex;
}
#one, #two, #thr, #fou {
flex: 1;
background: url('image.jpg');
}
#one, #thr {
background-attachment: fixed;
}
JS
function whatever() {
var oneW = one.clientWidth;
two.style.backgroundPosition = '-' + oneW + 'px 0';
fou.style.backgroundPosition = '-' + oneW * 3 + 'px 0';
};
我遇到了一个问题。我想要创建的一般效果可以通过上面的代码来实现。但是，background-image由于我尚未创建和设置background-size属性，因此外观的尺寸似乎是实际图像文件的尺寸，因此，如果浏览器小于图像本身，则图像将不会居中，而是会被截断。我已经尝试过应用background-size: cover，但是与background-attachment: fixed没有该属性的元素相比，它对元素的影响似乎有所不同，我不确定该怎么做或如何解决这个问题。有人知道我该如何解决这个特定问题？在此先感谢您提供任何解决方案，帮助或想法！
更新
因此，基于来自两页的信息（CSS背景大小：封面+背景附件：固定的剪辑背景图片和http://www.carsonshold.com/2013/02/css-background-sizecover-doesnt-like-固定定位/）我也碰到过，我增加了一些JS来调整高度background-attachment: fixed divs，这样解决了问题，但不是真的。以下是附加的JS。
function whatever()
{
...
var oneH = one.clientHeight;
one.style.backgroundSize = 'auto ' + oneH + 'px';
thr.style.backgroundSize = 'auto ' + oneH + 'px';
};
即使将浏览器background-size设置为cover，全屏或四分之一屏幕也可以完美对齐图像，但是无论出于何种原因，图像现在的行为都好像background-size设置为contain。我很混乱。
更新二
我通过手动将每个div的大小设置为窗口的innerWidth和innerHeight来解决此问题。代码在下面的“答案”部分中。
手动设置每个div窗口的宽度和高度，使其与窗口作品的宽度和高度相对应。
function whatever() {
...
var x = window.innerWidth;
var y = window.innerHeight;
one.style.backgroundSize = '' + x + 'px ' + y + 'px';
two.style.backgroundSize = '' + x + 'px ' + y + 'px';
thr.style.backgroundSize = '' + x + 'px ' + y + 'px';
fou.style.backgroundSize = '' + x + 'px ' + y + 'px';
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句