css - 如何使用 CSS 创建不透明的底层？

Question

我正在尝试使用 CSS 添加不透明的底层。

你能帮我理解我做错了什么吗？

CSS

popUp#translucent{
    width: 400px;
    height: 100px;
    background-color: black;
    margin-left: auto;
    margin-right: auto;
    position:fixed;
    opacity: .4;
}

popUp#content{
width:400px;
height: 100px;

}
#popContainer{
width: 400px;
height: 100px;
display: visible;
position: fixed;
z-index: 1000;
}

HTML

<div id="popContainer">
    <popUp id="translucent"></popUp>
    <popUp id = "content">
        <button class="btn large btn-custom" data-h="193" data-s="32" data-l="64" ,="" data-p="15">Alpha</button>
    </popUp>
</div>

http://jsfiddle.net/CeRX3/

谢谢

Answer 1

这是一种使用 CSS 为按钮创建底层的方法。

请检查这个fiddle使用 w3 学校的代码制作。

html

<div class="background">
    <div class="transbox">
    <p>This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    </p>
    </div>
    </div>

CSS

div.background
  {
  width:500px;
  height:250px;
  background:url(http://www.w3schools.com/css/klematis.jpg) repeat;
  border:2px solid black;
  }
div.transbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.6;
  }
div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  }

您可以使用上面的代码。 CSS 中的 Opacity 存在这个问题。

CSS 不透明度的问题 当我们将子元素添加到这段代码的 html 元素时，就会出现问题 影响。所有子元素都将继承相同的不透明度设置，即使您尝试 为所有这些元素指定完全不透明(这样做太麻烦了 无论如何)。

The Hacky Solution 我们如何解决这个问题？在某些情况下，您可以在视觉上模仿 元素之间的父子关系使用绝对定位，而这 将解决问题。然后，如果您想解决您的问题，那么您可能必须为此目的使用变通方法。