9

在下面的代码中，我只想为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/

4

4 回答 4

4

老问题，但新答案！:)

幸运的是，新版本的 Chrome 和 Firefox 支持8 位颜色。这真的很酷，尤其是在您开发和测试软件时。

例如： 

background-color: #ff0000;  (Red)

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

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

rgba()因此，从现在开始，如果您不希望或让整个 div 逐渐消失，您将不需要使用- 因为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/

于 2020-03-26T21:23:50.010 回答
3

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

li { 
  background-image: url('path/to/your/image.png'); 
}
于 2012-11-06T09:45:32.643 回答
1

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

于 2012-11-06T09:46:33.443 回答
0

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

让我尝试提供另一种解决方案。

这个解决方案不是问题的真正答案，但它可能会有所帮助。

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

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

于 2020-10-28T06:27:43.783 回答