我创建了一个响应式页面,其中包含带有文本和模糊背景的框.该页面可在
JSFiddle获取.
问题是：.content元素在不将其不透明度设置为0.99时不可见.为什么？
HTML
<div class="content-Box"> <div class="content-bg"></div> <div class="content"> <p>Text with blurred background</p> <p>Text with blurred background</p> </div> </div>
CSS
body {
background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg');
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-size: no-repeat fixed center center cover;
overflow: hidden;
}
.content-Box {
position: relative;
width: 300px;
overflow: hidden;
}
.content-bg {
position: absolute;
background-size: cover;
background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg');
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-size: no-repeat fixed center center cover;
filter: blur(5px);
-webkit-filter: blur(5px);
}
.content {
border-radius: 10px;
z-index: 100;
background-color: rgba(0,0.7);
opacity: 0.99999; /* Does not work without this wtf */
color: white;
}
.content :first-child { margin-top: 0px }
JS
function updateBackground() {
var contentBox = $(".content-Box");
var bg = $(".content-bg");
bg.css("left",-(contentBox.offset().left));
bg.css("top",-(contentBox.offset().top));
bg.width($(window).width());
bg.height($(window).height());
}
$(window).resize(function() {
updateBackground();
});
updateBackground();
解决方法
为什么没有不透明度的代码不起作用？
这是因为您的content元素似乎位于content-bg元素的后面. z-index没有效果,因为没有为其分配位置属性.
为什么在添加0.99的不透明度时它会起作用？
正如BoltClock在this answer中所提到的,添加小于1的不透明度会自动创建新的堆叠上下文(类似于将z-index添加到定位元素).这使内容元素前进,从而显示.
什么是理想的解决方案？
添加position：relative会使z-index按预期工作(这会使元素高于content-bg)并且可以解决问题.
function updateBackground() {
var contentBox = $(".content-Box");
var bg = $(".content-bg");
bg.css("left",-(contentBox.offset().left));
bg.css("top",-(contentBox.offset().top));
bg.width($(window).width());
bg.height($(window).height());
}
$(window).resize(function() {
updateBackground();
});
updateBackground();
body {
background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg');
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-size: no-repeat fixed center center cover;
overflow: hidden;
}
.content-Box {
position: relative;
width: 300px;
overflow: hidden;
}
.content-bg {
position: absolute;
background-size: cover;
background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg');
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-size: no-repeat fixed center center cover;
filter: blur(5px);
-webkit-filter: blur(5px);
}
.content {
position: relative; /* add this */
border-radius: 10px;
z-index: 100;
background-color: rgba(0,0.7);
color: white;
}
.content:first-child {
margin-top: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content-Box"> <div class="content-bg"></div> <div class="content"> <p>Text with blurred background</p> <p>Text with blurred background</p> </div> </div>
