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

Old question, but new answer! :)

Fortunately, the new versions of Chrome and Firefox support 8 digit colors. That's really cool, especially when you're developing and testing software.

For example:

background-color: #ff0000;  (Red)

If you want a opacity of 0.5, you can do this:

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

So, from now on you won't need to use the rgba() if you don't want or have the entire div fade away - because of the opacity: 0.x - when you only want the background color a little bit transparent.

But remember that not all browsers support that. So, please test the snippet below on Chrome or Firefox, ok?

Isn't that cool???

<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>

Source: https://css-tricks.com/8-digit-hex-codes/

Answer 2

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

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