CSS: Setting background opacity without rgba

css, html

Solution

Fortunately, the new versions of Chrome and Firefox support 8 digit colors.

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.

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

- CSS-Tricks: 8-Digit Hex Codes?

Problem

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/

Original source