CSS：在不设置rgba的情况下设置背景不透明度

Question

在以下代码中，我只想为li（而不是文本）的背景色设置不透明度。但是，请勿将用作rgba背景，这一点很重要。

我正在尝试跟踪，但是它也为链接文本设置了不透明度。

HTML：

<ul>
    <li><a href="#">Hello World</a></li>
</ul>

CSS：

body{
    background: red;
}

ul{
    margin: 100px;
}

li{
    padding: 10px;
    background: #000000;
    opacity: 0.1;
}

a{
    color: #fff;
    font-weight: 700;
    opacity: 1;  
}

JSFiddle： http : //jsfiddle.net/2uJhL/

Answer 1

幸运的是，新版本的 Chrome 和 Firefox 支持8 位颜色。

例如：

background-color: #ff0000;  (Red)

如果你想要0.5的不透明度，你可以这样做：

background-color: #ff00007f (The 7F is half of FF)

因此，从现在开始，如果您不希望或让整个 div 消失，则无需使用rgba()- 因为opacity: 0.x- 当您只希望背景颜色稍微透明时。

但请记住，并非所有浏览器都支持这一点。因此，请在 Chrome 或 Firefox 上测试下面的代码片段。

background-color: #ff0000;  (Red)

来源：

• CSS 技巧：8 位十六进制代码？

Answer 2

您可以设置 PNG 或 GIF 图像作为背景，即：

li { 
  background-image: url('path/to/your/image.png'); 
}