CSS: setting background opacity without rgba

Question

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

I am trying to execute, but it also sets the opacity for the link text.

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

You can set a PNG or GIF image as a background, for example:

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

Answer 2

Transparency applies to content and all children. You cannot set another opacity for children. However, if you do not want to use rgba, you can use png with the opacity you want. And installing png on your li in the background is the best solution in this case