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);}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;
}