您如何在CSS中使盒子透明

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是 number 在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/