覆蓋div與多列布局中斷在Chrome中

Question

我正在構建水平多列布局使用html和css只有我試圖添加一個疊加漸變div到框但我面臨一個奇怪的問題： Overlay div在FF/IE11/Edge/Safari中的所有塊上看起來都很好，但從右上角的塊中只消失了。

Chrome Preview

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 { 
 
\t -moz-column-count: 2; 
 
\t -webkit-column-count: 2; 
 
\t column-count: 2; 
 
    -moz-column-gap: 30px; 
 
\t -webkit-column-gap: 30px; 
 
\t 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"> 
 
\t <div class="masonry"> 
 
\t \t 
 
\t \t <article class="brick"><a href="#"><h3>Post Title - Big</h3><div class="overlay"></div></a></article> 
 
\t \t \t \t 
 
\t \t <div class="inner"> 
 
\t \t \t <article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article> 
 
\t \t \t <article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article> 
 
\t \t \t <article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article> 
 
\t \t \t <article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article> 
 
\t \t </div> 
 
\t \t \t 
 
\t \t <article class="brick"><a href="#"><h3>Post Title - Big</h3><div class="overlay"></div></a></article> 
 
\t \t \t 
 
\t </div> 
 
</div>

codePen：http://codepen.io/anon/pen/wgegxp

Answer 1

很奇怪，我傾向於這是一個錯誤。但是，作爲解決方法，請不要使用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 { 
 
\t -moz-column-count: 2; 
 
\t -webkit-column-count: 2; 
 
\t column-count: 2; 
 
    -moz-column-gap: 30px; 
 
\t -webkit-column-gap: 30px; 
 
\t 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"> 
 
\t \t <div class="masonry"> 
 
\t \t 
 
\t \t \t <article class="brick"><a href="#"><h3>Post Title - Big</h3><div class="overlay"></div></a></article> 
 
\t \t \t \t 
 
\t \t \t <div class="inner"> 
 
\t \t \t \t <article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article> 
 
\t \t \t \t <article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article> 
 
\t \t \t \t <article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article> 
 
\t \t \t \t <article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <article class="brick"><a href="#"><h3>Post Title - Big</h3><div class="overlay"></div></a></article> 
 
\t \t \t 
 
\t \t </div> 
 
\t </div>