CSS Background Opacity




Problems:

  • html and css - Below is one of the problem in html & css. Expected output is to make the background of the html element with opacity 0.4 and the text should have 100% opacity. Instead they both have an opacity 0.4. Can we achieve it?
<div style="opacity:0.4; background-image:url(...);">
 <div style="opacity:1.0;">
WikiTechy
 </div>
</div>

Solution 1:

  • This solution for this html5 css is different and inconvenient if they didn’t.
  • You can use a translucent png for your background image using your css html, or use an RGBa (a for alpha) color for your background color.
  • Example, 50% faded black background:

html code :

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      WikiTechy text
   </div>
</div>

Solutions 2:

  • The following solution is most useful to solve your problem

Html sample

I would do something like this

<div class="container"> 
<div class="text"> 
<p>Welcome to WikiTechy world!</p> 
</div> 
</div>

css in html

CSS:

.container {
    position: relative;
}

.container::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('/path/to/image.png');
    opacity: .4;
    content: "";
    z-index: -1;
}
  • This is assuming you are required to have a semi-transparent image btw, and not a color (which you should just use rgba for).
  • Also assumed is that you can't just alter the opacity of the image beforehand in photoshop.

Solution 3:

  • The following methods can be used to solve your problem
  • CSS Aplha Transparency Method (doesn't work in IE 8)
#div{background-color:rgba(255,0,0,0.5);}
  • Use a Transparent png image according to your choice as background.
  • Use the following css code snippet to create a cross-browser alpha-transparent background. Here is an example with #000000 @ 0.4% opacity
  • Html css

    .div {  
        background:rgb(0,0,0);  
        background: transparent\9;  
        background:rgba(0,0,0,0.4);  
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,
        endColorstr=#66000000);  
        zoom: 1;  
    }    
    .div:nth-child(n) {  
        filter: none;  
    }


    Related Searches to CSS Background Opacity