Question

我对CSS很新，而且我正在为一个网站写作，但却陷入了如何让盒子变得透明的问题。到目前为止，这是我的代码：

#left_box {
margin-top:0px;
min-width:10%;
max-width:10%;
height:800px;
background:orange;
position:absolute;
z-index:1;
left:0%;
top:0%;
opacity:80%;
}

Answer 1

使用opacity:0.8;

#left_box {
margin-top:0px;
min-width:10%;
max-width:10%;
height:800px;
background:orange;
position:absolute;
z-index:1;
left:0%;
top:0%;
opacity:0.8;
filter: alpha(opacity=80);  /* IE8 and lower */
}

注意： 不透明度值是0.0到1.0范围内的数字，两者都包含在内，表示通道的不透明度，即Alpha通道的值。间隔之外的任何值虽然有效，但会被限制在该范围内的最近限制。

https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

Answer 2

试试这个，opacity是一个数字，范围是0.0到1.0。

#left_box {
....
opacity: 0.8;
filter: alpha(opacity=80); /* IE8 and lower */
}

Answer 3

如果你想让盒子的背景透明而不是内容，你可以使用......

background: rgba(255,255,255,.8);。

但旧浏览器不支持此功能。

您可以在此处详细了解... http://css-tricks.com/rgba-browser-support/

如何在CSS中使框透明

3 个答案: