Question

我已经制作了8个小div盒，每行4个，它们包含在一个更大的包装盒中。 div box。我希望外部div是透明的，内部的div是完全不透明的白色。我在这个链接上看到了解决方案 How do you add different opacities to nested items? 并尝试了＆＃39; rgba＆＃39;属性。外部div变得完全透明，但问题是内部div是半透明的，而不是不透明的。我意识到这是因为外部div的透明度。它就像外部div用自己透明的面纱覆盖内部div，从而防止内部div完全不透明。但是我该如何解决这个问题呢？这是我的代码 - HTML

<div id="wrapper">
<div id="small"></div>
<div id="small"></div>
<div id="small"></div>
<div id="small"></div>
<div id="small"></div>
<div id="small"></div>
<div id="small"></div>
<div id="small"></div>
</div>

CSS

#wrapper {
background-color: rgba(255, 255, 255, 0);
opacity:0.7;
width:1043px; 
height:800px; 
}
#small {
margin: 30px; 
height: 200px;
width: 200px;
border: 0px;
float:left; 
position:relative; 
background-color: rgba(255, 255, 255, 1); 
}

有人请帮忙吗？

Answer 1

好的，首先，RGBA代表红色，绿色，蓝色和Alpha。

Alpha与opacity类似，您将opacity提供给父级。如果你把它放在alpha位置它会工作。

其次，来自父母的opacity总是被孩子继承。

以下是解决方案：

＆＃13;

#wrapper {
background-color: rgba(255, 255, 255, 0.7);
width:1043px; 
height:800px; 
}
#small {
margin: 30px; 
height: 200px;
width: 200px;
border: 0px;
float:left; 
position:relative; 
background-color: red;
}

＆＃13;

<div id="wrapper">
<div id="small"></div>
<div id="small"></div>
<div id="small"></div>
<div id="small"></div>
<div id="small"></div>
<div id="small"></div>
<div id="small"></div>
<div id="small"></div>
</div>

＆＃13;

Answer 2

将包装器的opacity设置为.7会使包装器内的所有内容都不透明。

http://jsfiddle.net/sdz546pg/

#wrapper {
background-color: rgba(255, 255, 255, .5);
width:1043px; 
height:800px; 
}
#wrapper>div {
margin: 30px; 
height: 200px;
width: 200px;
border: 0px;
float:left; 
position:relative; 
background-color: rgba(255, 255, 255, 1); 
}

删除不透明度并更改主background-color的{{1}}内的alpha值只会使包装器变为半透明。内容通常如此显示。

我个人更喜欢wrapper而不是hsla()，因为一般情况下使用不透明度和颜色。有时候你只想要一切都更轻或者更不饱和。用rgba这样做是一团糟。

rgba()

如果您有任何问题，请询问。

说你的代码中还有另一个错误。 hsla(HUE,SATURATION,LIGHTNESS,ALPHA) hsla(0-360,0%-100%,0%-100%,0-1) /*hsla(200,99%,51%,.7548)*/ hsla(0,100%,50%,1); /*red*/ hsla(0,0%,50%,1); /*grey*/ hsla(0,0%,50%,.5); /*50% opaque grey*/ hsla(0,0%,100%,1); /*white*/ hsla(0,0%,0%,1); /*black*/是指要唯一，请将ID替换为id。或使用 class="small"为您的嵌套元素提供所需的样式。

#wrapper>div

HTML / CSS＆＃39; rgba＆＃39; CSS属性不起作用内部div的不透明度不是完全不透明的

2 个答案: