我正在使用 仅使用 html 和 css 构建一个水平多列布局,我正在尝试向框添加叠加渐变 div,但我正面临一个奇怪的问题: Overlay div 在 FF/IE11/Edge/Safari 中的所有 block 上看起来都不错,但仅从右上角的 block chrome 中消失。
HTML/CSS 代码:
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.wrapper { width:90%; max-width:1130px; margin:auto; padding:3em 0; }
.masonry, .inner {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
column-gap: 30px;
}
.masonry article.brick { width:100%; height:300px; }
.inner article { width:100%; height:150px; }
.masonry article { margin-bottom: 30px; border:1px solid red; }
.masonry article { position:relative; } .masonry article a { color:red; }
.masonry article h3 { position:absolute; bottom:30px; margin-left: auto; margin-right: auto; left: 0;right: 0; width:90%; z-index:5; }
.masonry .inner article h3 { bottom:0px;}
.overlay{ width:100%; height:100%; position:absolute; background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); opacity:0.9; z-index:3; transition: all .3s; }
<div class="wrapper">
<div class="masonry">
<article class="brick"><a href="#"><h3>Post Title - Big</h3><div class="overlay"></div></a></article>
<div class="inner">
<article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article>
<article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article>
<article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article>
<article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article>
</div>
<article class="brick"><a href="#"><h3>Post Title - Big</h3><div class="overlay"></div></a></article>
</div>
</div>
最佳答案
很奇怪,我倾向于这是一个错误。但是,作为解决方法,不要使用 opacity
。设置渐变本身的不透明度以使其淡化。
似乎与您格式化 .inner
的方式和您对列的使用有关。
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.wrapper { width:90%; max-width:1130px; margin:auto; padding:3em 0; }
.masonry, .inner {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
column-gap: 30px;
}
.masonry article.brick { width:100%; height:300px; }
.inner article { width:100%; height:150px; }
.masonry article { margin-bottom: 30px; border:1px solid red; }
.masonry article { position:relative; } .masonry article a { color:red; }
.masonry article h3 { position:absolute; bottom:30px; margin-left: auto; margin-right: auto; left: 0;right: 0; width:90%; z-index:5; }
.masonry .inner article h3 { bottom:0px;}
.overlay{ width:100%; height:100%; position:absolute; background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.9)); z-index:3; transition: all .3s; }
<div class="wrapper">
<div class="masonry">
<article class="brick"><a href="#"><h3>Post Title - Big</h3><div class="overlay"></div></a></article>
<div class="inner">
<article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article>
<article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article>
<article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article>
<article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article>
</div>
<article class="brick"><a href="#"><h3>Post Title - Big</h3><div class="overlay"></div></a></article>
</div>
</div>
关于html - 在 Chrome 中使用多列布局中断覆盖 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41814080/