html – 未设置不透明度时元素消失：0.99

发布时间：2020-12-14 19:45:18 所属栏目：资源来源：网络整理

导读：我创建了一个响应式页面,其中包含带有文本和模糊背景的框.该页面可在 JSFiddle获取. 问题是：.content元素在不将其不透明度设置为0.99时不可见.为什么？ HTML div class="content-box" div class="content-bg"/div div class="content" pText with blurred b

我创建了一个响应式页面,其中包含带有文本和模糊背景的框.该页面可在 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 }

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!