0

我正在尝试使用 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/

谢谢

4

2 回答 2

1

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

请检查使用 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中的不透明度存在这个问题。

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

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

于 2013-01-20T18:56:38.780 回答
0

在半透明中将背景颜色更改为灰色并将不透明度更改为 0.1。它看起来更半透明。

于 2013-01-20T18:46:27.537 回答