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。