CSS:設置背景不透明度沒有rgba

[英]CSS: Setting background opacity without rgba


In the following code, I want to set the opacity only for the background color of the li (not the text). However, it is important NOT to use the rgba for the background.

在下面的代碼中,我想設置的不透明度僅為li的背景顏色(而不是文本)。然而,重要的是不要使用rgba作為背景。

I'm trying following, but it sets the opacity for the link text as well.

我嘗試跟隨,但是它也設置了鏈接文本的不透明度。

HTML:

HTML:

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

CSS:

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/

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

2 个解决方案

#1


3  

You can set a PNG or GIF image as background, i.e:

你可以設置一個PNG或GIF圖像作為背景,即:

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

#2


1  

The opacity is applied at the content and all children. You can't set a different opacity for the children. However if you don't want to use rgba you can use a png with opacity that you want. And setting a png to your li in the background is the best solution in this case

不透明度應用於內容和所有子內容。不能為孩子設置不同的不透明度。然而,如果你不想使用rgba,你可以使用不透明的png。在后台設置一個png是最好的解決方案


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2012/11/06/7253ab9db78bb128fe13a090f18169b9.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com