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/

Abridgment

maybe you can tell us why you can't use rgba so we can choose a proper alternative? – Semicolon

@Semicolon Agree.. Any problem with rgba?? – Locule

because i want to select the color dynamically, so that whatever color is picked, i want to set the opacity for it. The color can be picked in HEX only. – Abridgment

Why do you wish to only offer a subset of the colour choosing options that HTML offers? Is it because you don't know how to convert between base10 and base16 numbers? Is it for some other reason you've not shared yet? If you want to set the background opacity, you use rgba or hsla. Thus far, the question sounds like a coder (just) out of his/her depth that is applying arbitrary restrictions at the expense of user experience, simply to ease the task of coding it. I don't care for this assumption, and eagerly wait a response that refutes it. – Max

@Max because I'm using a color picker, which selects gets the color value in HEX. Just thought if i can use the color value as it is and apply a fixed opacity value with it. – Abridgment

Okay, sure - just convert the numbers that the colour picker gives you from base16 to base10 and use them. It's a few lines to convert one format to the other. If it throws you a colour in the format #RRGGBB, then just (a) strip the # (b)extract each 2character component (c) convert them to base10 (d) create the new colour with the desired opacity. new colour = rgba(rrr,ggg,bbb,a); (where rrr, ggg, bbb are the decimal equivalents of RR, GG and BB in #RRGGBB) – Max

Answer 1

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?

Efflux

Answer 2

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

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

Tisiphone

Answer 3

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

Pr

Answer 4

tl;dr Cmiiw, you can't setting the background opacity without RGBA

Let me try to give another solution.

This solution is not the real answer for the problem, but it may helps.

For me, you just need to convert the background color (hex value) to RGBA, using tools something like this https://cssgenerator.org/rgba-and-hex-color-generator.html.

Then, just use the RGBA value in your background color.

Leverrier