不设置不透明度时,元素消失:0.99

Question

我创建了一个响应式页面,其中包含带有文本和模糊背景的框.该页面可在JSFiddle上找到.

问题是: .content如果不将元素设置opacity为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, 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();

Answer 1

为什么没有不透明度的代码不起作用？

这是因为你的content元素似乎在content-bg元素后面.在z-index因为没有没有影响position分配给它的财产.

为什么在添加0.99的不透明度时它会起作用？

正如BoltClock在本回答中所提到的,添加opacity小于1会自动创建一个新的堆叠上下文(类似于添加z-index到定位元素).这会使content元素前进,从而显示出来.

什么是理想的解决方案？

添加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, 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>