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

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

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

Answer 2

不透明度适用于内容和所有孩子。您不能为孩子设置不同的不透明度。但是，如果您不想使用rgba，则可以使用您想要的具有不透明度的png。在后台设置png到li是这种情况下的最佳解决方案

Answer 3

旧问题，新答案！：）

幸运的是，新版本的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上测试以下代码段，好吗？

那不是很酷吗？

<div style="background-color: #ff00003f;">better than [opacity: 0.25]</div>
<div style="background-color: #ff00007f;">better than [opacity: 0.50]</div>
<div style="background-color: #ff0000bf;">better than [opacity: 0.75]</div>
<div style="background-color: #ff0000ff;">better than [opacity: 1.00]</div>

来源：https://css-tricks.com/8-digit-hex-codes/

Answer 4

tl; dr Cmiiw，如果没有RGBA，则无法设置背景不透明度

让我尝试提供其他解决方案。

此解决方案不是解决问题的真正方法，但可能会有所帮助。

对我来说，您只需要使用类似https://cssgenerator.org/rgba-and-hex-color-generator.html的工具将背景 color （十六进制值）转换为RGBA。

然后，只需在背景颜色中使用RGBA值即可。

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

4 个答案: