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

User · Answer

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:

_x000D_

  .supersizer {_x000D_
    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;_x000D_
    width: 100%;_x000D_
    height: 100%;_x000D_
    position: fixed;_x000D_
    z-index: -1;_x000D_
    opacity: 0.5;_x000D_
    -webkit-background-size: cover;_x000D_
    -moz-background-size: cover;_x000D_
    -o-background-size: cover;_x000D_
    background-size: cover;_x000D_
    top: 0;_x000D_
  }

_x000D_

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

_x000D_

User · Answer

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

User · Answer

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

User · Answer

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  lt integer gt s or  lt percentage gt s  where the number 255 corresponds to 100   A  alpha  can be a  lt number gt  between 0 and 1  or a  lt percentage gt   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

User · Answer

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

User · Answer

My trick is to create a transparent  png with the color and use background url

User · Answer

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

User · Answer

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

User · Answer

The easiest way to do this is with 2 divs  1 with the background and 1 with the text    x000D   x000D   container   x000D    position  relative  x000D    width  300px  x000D    height  200px  x000D    x000D   block   x000D    background   CCC  x000D    filter  alpha opacity 60   x000D       IE    x000D    -moz-opacity  0 6  x000D       Mozilla    x000D    opacity  0 6  x000D       CSS3    x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    height  100   x000D    width  100   x000D    x000D   text   x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    width  100   x000D    height  100   x000D    x000D   lt div id  container  gt  x000D     lt div id  block  gt  lt  div gt  x000D     lt div id  text  gt Test lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

Use   background url  location of image       Use an image with opacity   This method will work in all browsers

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

Examples related to css

Examples related to opacity