Categories
css html opacity

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

2465

Is it possible, using CSS only, to make the background of an element semi-transparent but have the content (text & images) of the element opaque?

I’d like to accomplish this without having the text and the background as two separate elements.

When trying:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

It looks like child elements are subjected to the opacity of their parents, so opacity:1 is relative to the opacity:0.6 of the parent.

6

  • 20

    Sadly not, CSS3 is targeting fixing this with the new colour module, it would allow you to specify an alpha value whenever you state a color. w3.org/TR/css3-color

    Apr 30, 2009 at 9:34

  • 75

    Actually, the child elements’ opacity is multiplied by the parent element’s opacity, not overridden. So for example if the p‘s opacity were .6 and the span‘s opacity were .5 then the true opacity of the text in the span would be 0.3.

    – chharvey

    Jan 3, 2012 at 4:05

  • 2

    Guess so, but since it’s the background that’s translucent, you don’t even need the filter/opacity: codepen.io/anon/pen/ksJug

    Nov 18, 2013 at 13:20

  • 7

    @chharvey what is supposed to happen if I define opacity:.5 for the parent and opacity:2 for the child element?

    – Alexander

    Aug 4, 2014 at 12:28

  • 12

    @Alexander, I’m glad you asked that question. Mathematically, one would suspect the child would return back to an opacity of 1. However, opacity:2; is invalid CSS. The value of the opacity property must be within the inclusive range [0,1].

    – chharvey

    Aug 5, 2014 at 23:11

2371

Either use a semi-transparent PNG or SVG image or use CSS:

background-color: rgba(255, 0, 0, 0.5);

Here’s an article from css3.info, Opacity, RGBA and compromise (2007-06-03).

Beware that the text still needs sufficient contrast with the background, once the underlying background shines through.


<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>

10

  • 92

    is it possible to do this with hex colors? Like #fff ?

    – grm

    Jul 13, 2011 at 22:32

  • 43

    @grm: W3C considered introducing a #RRGGBBAA hex code format, but they decided not to (for various reasons), so we can’t.

    – outis

    Dec 15, 2012 at 6:59

  • 101

    @grm with SASS You can, background-color: rgba(#000, .5);

    May 30, 2013 at 0:34


  • 2

    Worth pointing out that if you want to use transparency, every browser that supports RGBA also supports HSLA, which is a far more intuitive color mapping. IE8 is the only pseudosignificant browser that fails to support it, so barring that go ahead and use HSL(A) for every colour.

    – iono

    Nov 28, 2013 at 8:17

  • 28

    @outis: Good news, #RRGGBBAA is now in Color level 4.

    – BoltClock

    Feb 26, 2015 at 19:01


485

In Firefox 3 and Safari 3, you can use RGBA like Georg Schölly mentioned.

A little known trick is that you can use it in Internet Explorer as well using the gradient filter.

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="#7F00FF00", EndColorStr="#7F00FF00");

The first hex number defines the alpha value of the color.

Full solution all browsers:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

This is from CSS background transparency without affecting child elements, through RGBa and filters.

Screenshots proof of results:

This is when using the following code:

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>

Chrome-33
IE11
IE9
IE8

8

  • 5

    This post shows how to do it in IE8:robertnyman.com/2010/01/11/…

    – Slapout

    Aug 20, 2010 at 14:20

  • 14

    @philfreo : If you change the first bit of Sebastian’s code to “background: rgb(0, 0, 0) transparent;” it should now work in IE8. This was bugging me for quite some time!

    Feb 7, 2011 at 23:10

  • filter:progid Works great with IE 9. color is: transparency,red,green,blue – all two digit hex values.

    Aug 6, 2012 at 9:05

  • background: rgb(0, 0, 0) transparent; does not make sense as transparent overrides the fallback color (0,0,0), and makes the background 100% transparent. We’re aiming for semi-transparency, so depending on your design, the fallback should either be a solid color (background: rgb(0, 0, 0);) or fully transparent (background: transparent;).

    Feb 6, 2013 at 23:22

  • 1

    @AdrienBe – I edited your answer as per your instructions. Unfortunately I have been out of the headspace of this particular Q&A for some time, so I cannot add to this conversation at this time.

    Feb 27, 2014 at 19:41

117

This is the best solution I could come up with, NOT using CSS 3. And it works great on Firefox, Chrome, and Internet Explorer as far as I can see.

Put a container div and two children divs at the same level, one for content, one for the background.
And using CSS, auto-size the background to fit the content and put the background actually in the back using z-index.

.container {
  position: relative;
}
.content {
  position: relative;
  color: White;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  /* These three lines are for transparency in all browsers. */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: .5;
}
<div class="container">
  <div class="content">
    Here is the content.
    <br/>Background should grow to fit.
  </div>
  <div class="background"></div>
</div>

3

  • 19

    He said “Without separating the text and background in two elements positioned over each other.”. Thanks anyway, this is a good fix and is useful, but in some cases you’d want the opaque element to be a child of the semi-transparent one.

    – Rolf

    Dec 19, 2010 at 17:24

  • I replied pretty much the same on another SO question but added a jsfiddle & screenshot proofs (IE7+), see here if interested stackoverflow.com/a/21984546/759452

    – Adrien Be

    Feb 25, 2014 at 17:40

  • @Gorkem Pacaci: Make sure the opacity properties are “really” cross-browser, you can use this code snippet from CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity

    – Adrien Be

    Feb 27, 2014 at 13:40