我的页面背景固定。该页面有3个绝对定位的div设置为混合模式。在这3个div上（针对内容），我浮动了3个相同的div，但没有混合模式或背景色。我想按顺序排列这些div，一个在顶部，一个在底部，一个在底部。我尝试使用margin-top偏移div的高度，但这使所有内容都离顶部太远了，以致于无法再垂直居中。距离很近，但距离还不够远！
混合模式的问题意味着我无法设置父div来控制子代的位置，因为这样会丢失混合模式。我尝试用混合模式寻找解决父级情况的方法，但似乎找不到任何可靠的方法。
有没有解决的办法？
这是我的HTML：
<img src='http://www.pptback.com/uploads/blue-world-map-backgrounds-powerpoint.jpg' alt='background' id='bg' class='noselect' />
<div class='top-bg'></div>
<div class='main-bg'></div>
<div class='foot-bg'></div>
<div class='top-content'>This is the top</div>
<div class='main-content'>This is the main content</div>
<div class='foot-content'>This is the foot</div>
这是我的CSS：
#bg {position:fixed; min-height:100%; min-width:100%; top:0; left:0;}
.noselect {-webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.top-bg {position:absolute; width:40%; height:60px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:-185px; background:#393939; mix-blend-mode:multiply; z-index:2;}
.main-bg {position:absolute; width:40%; height:430px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:61px; background:#515151; mix-blend-mode:multiply; z-index:2;}
.foot-bg {position:absolute; width:40%; height:60px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:306px; background:#393939; mix-blend-mode:multiply; z-index:2;}
.top-content {position:absolute; width:40%; height:60px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:-185px; color:#fff; z-index:3;}
.main-content {position:absolute; width:40%; height:430px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:61px; color:#fff; z-index:3;}
.foot-content {position:absolute; width:40%; height:60px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:306px; color:#fff; z-index:3;}
弄清楚了。我玩弄了数字，并在第一篇文章中将顶部div的高度添加到了负偏移中，中间没有偏移，底部div与顶部具有相同的偏移，但是正高度，并且效果很好。
的HTML
<html>
<head></head>
<body>
<img src='http://www.pptback.com/uploads/blue-world-map-backgrounds-powerpoint.jpg' alt='background' id='bg' class='noselect' />
<div class='top-bg'></div>
<div class='main-bg'></div>
<div class='foot-bg'></div>
<div class='top-content'>This is the top</div>
<div class='main-content'>This is the main content</div>
<div class='foot-content'>This is the foot</div>
</body>
</html>
的CSS
#bg {position:fixed; min-height:100%; min-width:100%; top:0; left:0;}
.noselect {-webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.top-bg {position:absolute; width:40%; height:60px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:-246px; background:#393939; mix-blend-mode:multiply; z-index:2;}
.main-bg {position:absolute; width:40%; height:430px; top:50%; left:50%; transform:translate(-50%,-50%); background:#515151; mix-blend-mode:multiply; z-index:2;}
.foot-bg {position:absolute; width:40%; height:60px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:246px; background:#393939; mix-blend-mode:multiply; z-index:2;}
.top-content {position:absolute; width:40%; height:60px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:-246px; color:#fff; z-index:3;}
.main-content {position:absolute; width:40%; height:430px; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; z-index:3;}
.foot-content {position:absolute; width:40%; height:60px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:246px; color:#fff; z-index:3;}
新提琴： https : //jsfiddle.net/jrox275g/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句