CSS HTML opacity

[Solved – 3 Answers] CSS Background Opacity

[Solved – 3 Answers] HTML-CSS -Background Opacity -Below is one of the problem but I expected to make the background have an opacity 0.4

Below is one of the problem but I expected to make the background have an opacity 0.4 and the text to have 100% opacity. Instead they both have an opacity 0.4.

HTML code
<div style="opacity:0.4; background-image:url(...);">
 <div style="opacity:1.0;">
  Text
 </div>
</div>

  • This solution is different and inconvenient if they didn’t.
  • You can use a translucent png for your background image, 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>
      Text added.
   </div>
</div>


The following solution is most useful to solve your problem

Css Code
<div class="container"> 
<div class="text"> 
<p>text yay!</p> 
</div> 
</div> 

Css code:

css code
.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;
}


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

css code
.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;  
}
READ  [ Solved -5 Answers]CSS- HTML- How to align content of a div to the bottom

About the author

Venkatesan Prabu

Venkatesan Prabu

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

Add Comment

Click here to post a comment