CSS opacity only to background color not the text

Question

This question already has an answer here:

• How do I give text or an image a transparent background using CSS? 28 answers

Can I assign the opacity property to the background property of a div only and not to the text on it?

I've tried:

background: #CCC;
opacity: 0.6;

but this doesn't change the opacity.

Answer 1

A great way to do this would be to use css3 indeed.

Create a div width a class - e.g. supersizer on top of your page:

then set following css-properties:

  .supersizer {
    background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    opacity: 0.5;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    top: 0;
  }

<div class="supersizer"></div>

Answer 2

You can't. You have to have a separate div that is just that background, so that you can only apply the opacity to that.

I tried doing this recently, and since I was already using jQuery, I found the following to be the least hassle:

1. Create the two different divs. They'll be siblings, not contained in each other or anything.
2. Give the text div a solid background color, because that will be the JS-less default.
3. Use jQuery to get the text div's height, and apply it to the background div.

I'm sure there's some kind of CSS ninja way to do all this with only floats or something, but I didn't have the patience to figure it out.

Answer 3

It sounds like you want to use a transparent background, in which case you could try using the rgba() function:

rgba(R, G, B, A)

R (red), G (green), and B (blue) can be either <integer>s or <percentage>s, where the number 255 corresponds to 100%. A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).

RGBa example

rgba(51, 170, 51, .1)    /*  10% opaque green */ 
rgba(51, 170, 51, .4)    /*  40% opaque green */ 
rgba(51, 170, 51, .7)    /*  70% opaque green */ 
rgba(51, 170, 51,  1)    /* full opaque green */ 

A small example showing how rgba can be used.

As of 2018, practically every browser supports the rgba syntax.

Answer 4

For LESS users only:

If you don't like to set your colors using RGBA, but rather using HEX, there are solutions.

You could use a mixin like:

.transparentBackgroundColorMixin(@alpha,@color) {
  background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}

And use it like

.myClass {
    .transparentBackgroundColorMixin(0.6,#FFFFFF);
}

Actually this is what a built-in LESS function also provide:

.myClass {
    background-color: fade(#FFFFFF, 50%);
}

See How to convert HEX color to rgba with Less compiler?

Answer 5

For anyone coming across this thread, here's a script called thatsNotYoChild.js that I just wrote that solves this problem automatically:

http://www.impressivewebs.com/fixing-parent-child-opacity/

Basically, it separates children from the parent element, but keeps the element in the same physical location on the page.

Answer 6

use

background:url("location of image");//use an image with opacity

This method will work in all browsers