Content

Content

关注
发信
关注(28)粉丝(399)

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

本文介绍了不设置不透明度时元素消失：0.99的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我创建了一个响应式页面，其中包含一个带有文本框和背景模糊的框。该页面可在上获得。



问题是： .content 元素在未将不透明度设置为0.99时不可见。为什么？

HTML 

 < ; div class =content-box> 
< div class =content-bg>< / div> 
< div class =content> 
< p>背景模糊的文字< / p> 
< p>背景模糊的文字< / p> 
< / div> 
< / div>

CSS 

  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}

JS 

  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不透明度时工作？



正如BoltClock在，添加不透明度小于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（$（窗口）.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>

I created a responsive page which has a box with text and blurred background. The page is available here on JSFiddle.

The problem is: .content element is not visible without setting its opacity to 0.99. Why?

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();
解决方案

Why does the code not work without opacity?

This is because your 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?

As mentioned by BoltClock in this answer, adding a 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?

Adding 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>

这篇关于不设置不透明度时元素消失：0.99的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-30 09:55
Powered by LMLPHP ©2024 Content 0.001611