html - 不设置不透明度时元素消失 : 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 在 this answer 中提到的那样，添加小于 1 的 opacity 会自动创建一个新的堆叠上下文(类似于将 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>