不设置不透明度时元素消失：0.99 [英] Element disappears when not setting opacity: 0.99
问题描述
我创建了一个响应式页面，其中包含一个带有文本框和背景模糊的框。该页面可在 JSFiddle 上获得。
问题是： HTML CSS JS 这是因为您的 正如BoltClock在这个答案，添加 添加 I created a responsive page which has a box with text and blurred background. The page is available here on JSFiddle. The problem is: HTML CSS JS
This is because your As mentioned by BoltClock in this answer, adding a Adding
这篇关于不设置不透明度时元素消失：0.99的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！不透明度设置为0.99时不可见。为什么？
< ; div class =content-box>
< div class =content-bg>< / div>
< div class =content>
< p>背景模糊的文字< / p>
< p>背景模糊的文字< / p>
< / div>
< / div>
body {
background-image：url（'http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg'）;
背景颜色：黑色;
背景重复：不重复;
background-position：center;
background-attachment：fixed;
background-size：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-position：center;
background-attachment：fixed;
background-size：cover;
背景大小：不重复固定中心中心覆盖;
filter：blur（5px）;
-webkit-filter：blur（5px）;
}
.content {
border-radius：10px;
z-index：100;
background-color：rgba（0，0，0，0.7）;
不透明度：0.99999; / *没有这个wtf * /
color：white;
}
.content：first-child {margin-top：0px}
function updateBackground（）{
var contentBox = $（。content -框）;
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（）;
为什么代码不能在没有不透明的情况下工作？ h3>
内容元素似乎落后于 content-bg 元素。 z-index 不起作用，因为没有
为什么在添加0.99不透明度时工作？
不透明度小于1会自动创建一个新的堆栈上下文（类似于将 z-index 添加到定位元素中）。这带来了 content 元素向前，因此它显示出来。
什么是理想的解决方案？
position：relative 会使 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（$（窗口）.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-position：center; background-attachment：fixed; background-size：cover;背景大小：不重复的固定中心中心覆盖; overflow：hidden;}。content-box {position：relative;宽度：300px; overflow：hidden;}。content-bg {position：absolute; background-size：cover; background-image：url（'http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg'）;背景颜色：黑色;背景重复：不重复; background-position：center; background-attachment：fixed; background-size：cover;背景大小：不重复的固定中心中心覆盖; filter：blur（5px）; -webkit-filter：blur（5px）;}。content {position：relative; / *添加这个* / border-radius：10px; z-index：100; background-color：rgba（0，0，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 = 内容框> < div class =content-bg>< / div> < div class =content> < p>背景模糊的文字< / p> < p>背景模糊的文字< / p> < / div>< / div> .content element is not visible without setting its opacity to 0.99. Why?<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>
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, 0, 0.7);
opacity: 0.99999; /* Does not work without this wtf */
color: white;
}
.content :first-child { margin-top: 0px }
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();
Why does the code not work without opacity?
content element seems to be behind the content-bg element. The z-index has no effect because there is no position property assigned to it. Why does it work when opacity of 0.99 is added?
opacity less than 1 automatically creates a new stacking context (similar to adding z-index to a positioned element). This brings content element forward and thus it gets displayed. What is the ideal solution?
position: relative would make the z-index work as expected (which is bring the element above content-bg) and that would solve the issue.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, 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>
