html - CSS: Setting background opacity without rgba

Question

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.

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

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 background, i.e:

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