CSS opacity only to background color, not the text on it?

Question

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.

For a cross browser method, see an earlier answer I gave: http://stackoverflow.com/questions/4792090/cross-browser-rgba-background/4792173#4792173 It's basically `rgba`, but it works everywhere. — thirtydot, Feb 27 '11 at 18:34
This question was asked in January -- http://stackoverflow.com/questions/637921/opacity-of-background-not-text — slifty, Feb 27 '11 at 18:35
A second same January asked question here: http://stackoverflow.com/questions/4790563/how-do-i-make-a-semi-transparent-background — danicotra, Oct 30 '16 at 19:59

score 1589 · Accepted Answer · edited Jun 16 '21 at 02:49

1589

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
background: rgba(51, 170, 51, .1)    /*  10% opaque green */ 
background: rgba(51, 170, 51, .4)    /*  40% opaque green */ 
background: rgba(51, 170, 51, .7)    /*  70% opaque green */ 
background: 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.

edited Jun 16 '21 at 02:49

TV-C-1-5

680
2
13
19

answered Feb 27 '11 at 18:32

8

@adam Just so you know, this will not work in IE. – Hussein Feb 27 '11 at 20:14
121

Dang..why is it always the IE that spoils the fun?! – Haikal Nashuha Jan 11 '13 at 03:19
19

It works fine in IE9+ ;o) – Martin Overgaard Feb 27 '13 at 09:18
its not woks in mozilla firefox – hserusv Aug 10 '13 at 05:51
7

background-color: rgba(54, 25, 25, .5); works Chrome,Mozilla,IE 10 as well – nAkhmedov Sep 24 '13 at 06:41
1

css3pie implements this css3 feature for older browsers such as IE8 & IE9 (as well as many others, ie. rounded corners & gradients), see http://css3pie.com/forum/viewtopic.php?f=4&t=1133 – Adriano Feb 14 '14 at 11:02
2

What if the background is an image and you want to adjust its opacity without affecting all of its children? – kingsfoil Dec 02 '14 at 20:16
24

Yes, using rgba() works in most cases, but it would be nice if there was a "background-opacity:" property in css, because when the "background-color:" is set dynamically (on the fly) as an input to a settings function in an admin appearance panel, which has been coded to use only rgb(), and you don't want to override that in your css, because then the dynamic input in your function would not work. In that case, the only way to add opacity is to modify html. If there was a "background-opacity" property, then no html code modifications would be necessary... – Damian Green Nov 22 '15 at 06:22
2

any other way to use this with hex codes? – Smakosh Feb 07 '19 at 15:18
3

If you use SASS, `transparentize ` allows you to reuse your RGB color variables and still apply an opacity: https://codepen.io/timharbour/pen/cBLqi – Jonathan Rys Jul 20 '20 at 19:14
Is there any way to use hex codes in the `rgba` function (e.g. `rgba(0xff, 0xc4, 0x27, .5)` ? – Ωmega Apr 13 '22 at 21:16

score 86 · Answer 2 · edited Mar 30 '15 at 22:10

86

The easiest way to do this is with 2 divs, 1 with the background and 1 with the text:

#container {
  position: relative;
  width: 300px;
  height: 200px;
}
#block {
  background: #CCC;
  filter: alpha(opacity=60);
  /* IE */
  -moz-opacity: 0.6;
  /* Mozilla */
  opacity: 0.6;
  /* CSS3 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div id="container">
  <div id="block"></div>
  <div id="text">Test</div>
</div>

edited Mar 30 '15 at 22:10

Ruslan López

4,433
2
26
37

answered Feb 27 '11 at 19:40

Kostas

1,319
12
18

2

following property - "position: absolute;" is must in #text class for the effect to work. – smile.al.d.way Mar 20 '13 at 15:39
But this will not be a good idea, in case we have another absolute positioned div who's position depends on parent relative element of #container – Vel Murugan S Jul 23 '13 at 05:59
1

And what happens when you need your #block opac background placement to be determined by your text? For instance: hovering over a promo block brings up text half the size of the promo block. The #block layer won't respond to the text height. – Ben Sewards Oct 23 '14 at 21:04
I like this answer than fiddling with rgba since it's better supported. But why does #text have to be position absolute? With the #block in position absolute, it's out of the flow and won't affect the other elements in the page. – gdbj Jan 06 '17 at 17:09

score 49 · Answer 3 · edited Mar 30 '19 at 21:54

49

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 do I convert a hexadecimal color to rgba with the Less compiler?

edited Mar 30 '19 at 21:54

Peter Mortensen

30,738
21
105
131

answered Jun 26 '14 at 13:39

Sebastien Lorber

89,644
67
288
419

1

LOVE THIS SOLUTION <3 <3 my first mixin this is powerful stuf – Michael Jan 21 '20 at 22:04
1

You could also achieve this without Less or mixins by modifying the end of the string of the hex value with inline style https://www.w3schools.com/cssref/css_colors_legal.asp – Graham Hesketh Jul 03 '22 at 14:34
Thanks! I am using SCSS and did something like this: `background-color: rgba(red($primary), green($primary), blue($primary), 0.25);` – TinyTiger Jun 18 '23 at 04:42

score 15 · Answer 4 · edited Mar 30 '19 at 21:49

15

I had the same problem. I want a 100% transparent background color. Just use this code; it's worked great for me:

rgba(54, 25, 25, .00004);

You can see examples on the left side on this web page (the contact form area).

edited Mar 30 '19 at 21:49

Peter Mortensen

30,738
21
105
131

answered Mar 17 '13 at 09:16

user2178930

159
1
2

12

If you actually want 100% transparent, why aren't you using `rgba(54, 25, 25, 0);`? Most modern browsers won't round until the 15th decimal, but the visual difference is most likely pretty minimal between your 99.996% transparent and just using 100% transparent. – Ryan Jul 20 '17 at 15:58

score 10 · Answer 5 · edited Jul 27 '14 at 15:34

10

My trick is to create a transparent .png with the color and use background:url().

edited Jul 27 '14 at 15:34

answered Feb 17 '13 at 16:12

user1542894

95
1
10

2

That's the best solution if you're dealing with legacy browsers, IMO. – Erik Reppen Dec 18 '14 at 14:45

score 10 · Answer 6 · edited Mar 30 '19 at 21:48

10

This will work with every browser

div {
    -khtml-opacity: .50;
    -moz-opacity: .50;
    -ms-filter: ”alpha(opacity=50)”;
    filter: alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity: .50;
}

If you don't want transparency to affect the entire container and its children, check this workaround. You must have an absolutely positioned child with a relatively positioned parent to achieve this. CSS Opacity That Doesn’t Affect Child Elements

Check a working demo at CSS Opacity That Doesn't Affect "Children"

edited Mar 30 '19 at 21:48

Peter Mortensen

30,738
21
105
131

answered Feb 27 '11 at 20:02

Hussein

42,480
25
113
143

30

This affects the foreground. OP asked specifically for background only. – DSoa Jul 14 '15 at 20:01
@DSoa any solution for background only? but using rgb and alpha in different css lines – Sushan Nov 11 '20 at 10:47

score 4 · Answer 7 · answered Mar 22 '13 at 04:01

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.

score 4 · Answer 8 · edited Mar 30 '19 at 21:51

A great way to do this would be to use CSS 3 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>

score 1 · Answer 9 · edited Jan 18 '13 at 10:35

1

The easiest solution is to create 3 divs. One that will contain the other 2, the one with transparent background and the one with content. Make the first div's position relative and set the one with transparent background to negative z-index, then adjust the position of the content to fit over the transparent background. This way you won't have issues with absolute positioning.

edited Jan 18 '13 at 10:35

Taryn

242,637
56
362
405

answered Jan 18 '13 at 10:13

Balsa

11
1

Each one of 3 divs should be set to relative positioning so then they can be moved and adjusted inside the parent div, and also the parent div (if needed) moved in context of the whole page. Div with transparent background and the one with content should not contain each other. They shold be sibiling in first div. – Balsa Jan 18 '13 at 16:36

score -9 · Answer 10 · edited Mar 30 '19 at 21:50

-9

Use:

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

This method will work in all browsers.

edited Mar 30 '19 at 21:50

Peter Mortensen

30,738
21
105
131

answered Feb 03 '14 at 09:16

Neeraj

15
1

1

I don't think the OP wanted to use an image, though it doesn't state that. Didn't vote down for this, just trying to clarify. – Christian Feb 21 '14 at 06:50

score -29 · Answer 11 · edited Mar 30 '19 at 21:45

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:

Create the two different divs. They'll be siblings, not contained in each other or anything.
Give the text div a solid background color, because that will be the JavaScript-less default.
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.

`background: rgba(54, 25, 25, .5);` must be the css ninja you are talking about. :) — Ruchan, Dec 10 '13 at 07:50

CSS opacity only to background color, not the text on it?

11 Answers11

`rgba(R, G, B, A)`

RGBa example

Linked

Related