css - div背景半透明，不是内容？

Question

我正在尝试制作一个具有半透明背景但内容完全不透明的 div。这是我所拥有的：

#mydiv { 
 color: #FFFFFF;
 width: 900px;
 height: 140px;
 border: 0px;
 border-radius: 15px;
 background: #000000;
 opacity: .2;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

有没有办法用 CSS 做到这一点？

score 5 · Accepted Answer

5

尝试使用这个：

background-color: rgba(255, 0, 0, 0.2);

这里有更多关于rgba().

于 2012-07-07T21:32:02.600 回答

score 2 · Accepted Answer

2

使用 CSS3 颜色属性rgba。

background-color:rgba(0,255,0,0.5);

于 2012-07-07T21:32:59.433 回答

score 1 · Accepted Answer

所有子级最多将具有与其父级相同的透明度。这意味着如果您的 div 的不透明度为 0.2，则其子项的不透明度为 1 将等于 0.2。

div1 opacity = 0.2
  div2 opacity = 1
    div3opacity = 0.5

意义：

div1 --> real opacity = 0.2 == 0.2
div2 --> real opacity = 0.2 * 1 == 0.2
div3 --> real opacity = 0.2 * 1 * 0.5 == 0.1

score 1 · Accepted Answer

#mydiv { 
 color: #FFFFFF;
 width: 900px;
 height: 140px;
 border: 0px;
 border-radius: 15px;
 background: rgba(0,0,0,0.1);
 opacity: .2;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

score 0 · Accepted Answer

这样做的一个技巧（除了 CSS3 rgba 规则）是创建一个只有 10% 不透明度的纯色 png。将其用作background-image下面的示例图像

X 在此处输入图像描述 X

（上面是 10% 白色的 png）

css - div背景半透明，不是内容？

5 回答 5

Related

Reference