CSS:如果在DIV上使用不透明度,内部的一切都更轻

Question

我有这样的结构:

<div class="abc">
  <ul>
    <li>something</li>
    ...
  </ul>
</div>

我需要在abcdiv 上应用不透明度选项.如果我这样做,它可以工作,但内部文本<ul>具有不透明度,因为abcDIV =>文本输入<ul>更轻.

是否有任何方法可以应用于opacityDIV(其背景),但不适用于DIV内容？

谢谢

Answer 1

如果不将div拉出div,我能想到的唯一方法是使用rgba使背景颜色部分透明,如果它是纯色:

background-color:rgba(0,0,0,.5);

这将使背景变为黑色,具有50%的不透明度,但仅适用于较新的浏览器.

jsFiddle:http://jsfiddle.net/jdwire/XzeGE/

为了支持旧浏览器,您可以将一个微小的png base64编码到css中(或者仅引用一个外部图像).有关详细信息,请参阅http://en.wikipedia.org/wiki/Data_URI_scheme,有关在css或html中嵌入base64编码图像的缺点,请参阅/sf/answers/368067101/.

如果背景是图像,只需将其设为部分透明的png即可.