CSS Background Opacity [duplicate] - html

Question

This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 6 years ago.
I am using something similar to the following code:
<div style="opacity:0.4; background-image:url(...);">
<div style="opacity:1.0;">
Text
</div>
</div>
I expected this to make the background have an opacity of 0.4 and the text to have 100% opacity. Instead they both have an opacity of 0.4.

Answer 1

Children inherit opacity. It'd be weird and inconvenient if they didn't.
You can use a translucent PNG file for your background image, or use an RGBa (a for alpha) color for your background color.
Example, 50% faded black background:
<div style="background-color:rgba(0, 0, 0, 0.5);">
<div>
Text added.
</div>
</div>

Answer 2

You can use pseudo-elements ::before or ::after to get a semi-transparent background and you can do this with just one container. Use something like this:
<article>
Text.
</article>
Then apply some CSS:
article {
position: relative;
z-index: 1;
}
article::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .4;
z-index: -1;
background: url(path/to/your/image);
}
Example:
body {
background: red;
}
article {
position: relative;
z-index: 1;
}
article:before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
opacity: .4;
z-index: -1;
background: url(https://31.media.tumblr.com/8ec07e49f33088c2e32c158ca4262eb2/tumblr_n5wav6Tz4R1st5lhmo1_1280.jpg);
}
<article>
Text.
</article>
Note: You might need to adjust the z-index values.

Answer 3

The following methods can be used to solve your problem:
CSS alpha transparency method (doesn't work in Internet Explorer 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
.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;
}
For more details regarding this technique, see this, which has an online CSS generator.

Answer 4

I would do something like this
<div class="container">
<div class="text">
<p>text yay!</p>
</div>
</div>
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;
}
It should work. 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.

Answer 5

You can use Sass' transparentize.
I found it to be the most useful and plain to use.
transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6)
See more: #transparentize($color, $amount) ⇒ Sass::Script::Value::Color

Answer 6

.transbg{/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: 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)";}

Answer 7

This is because the inner div has 100% of the opacity of the div it is nested in (which has 40% opacity).
In order to circumvent it, there are a few things you could do.
You could create two separate divs like so:
<div id="background"></div>
<div id="bContent"></div>
Set your desired CSS opacity and other properties for the background and use the z-index property (z-index) to style and position the bContent div. With this you can place the div overtope of the background div without having it's opacity mucked with.
Another option is to RGBa. This will allow you to nest your divs and still achieve div specific opacity.
The last option is to simply make a semi transparent .png image of the color you want in your desired image editor of choice, set the background-image property to the URL of the image and then you won't have to worry about mucking about with the CSS and losing the capability and organization of a nested div structure.

Answer 8

Just make sure to put width and height for the foreground the same with the background, or try to have top, bottom, left and right properties.
<style>
.foreground, .background {
position: absolute;
}
.foreground {
z-index: 1;
}
.background {
background-image: url(your/image/here.jpg);
opacity: 0.4;
}
</style>
<div class="foreground"></div>
<div class="background"></div>