Set background opacity css

CSS Background Opacity [duplicate]

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.

8 Answers 8

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:

It’s not really correct to say that «Children inherit opacity». They don’t. It’s just that if a child is contained in a parent with opacity, the child will have opacity: 1, but the parent applies it’s opacity to itself including all it’s children.

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:

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

Note: You might need to adjust the z-index values.

I prefer this solution over the one with rgba because it works with both images and background-colors.

The accepted answer is correct but this creative solution answers the OP more directly. Editing your background image to be a semi-transparent png/gif/etc.. is even more correct. Opacity takes a bit more juice to render.

This works, however if you want to change the background color of a pseudo element via javascript — you won’t be able to since it is part of the shadow-dom.

The following methods can be used to solve your problem:

CSS alpha transparency method (doesn’t work in Internet Explorer 8):

For more details regarding this technique, see this, which has an online CSS generator.

@Wilt the css rule background-color is a subrule of background. Similar to border, margin, and padding, all background subrules can be set inside of background in one line instead of separately. Using background in this instance is what you want though so you can override other background subrules.

I would do something like this

.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.

pointer-events: none; instead of z-index: -1 on the ::before pseudo-element will allow the mouse to click through it to the actual element while still showing the pseudo on top.

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) 

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:

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.

Источник

Can I set an opacity only to the background image of a div?

everything will be in low opacity – and I don’t want that. So my question is – How can I get low-opacity background image with full opacity text?

stackoverflow.com/questions/6624457/… Note that i do have comment there ( under Phil’s answer ) showing a way to do it with css opacity, if that is the preferred way. ( jsfiddle.net/4tTNZ )

8 Answers 8

background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png"); 

@jj_: Because at the time there was very limited support for linear-gradient . The accepted answer I wrote is over 4 years old 😉

Maybe you could add a comment or a little update to your question, informing that this is now the new good way to do it. See you in 4 years for a new update 😉

@jj_: Actually, this solution doesn’t make the image transparent. It only adds a white layer with 50% transparency on top of it. Hence, it’s not a valid answer for the question.

I think we can agree that it achieves the intent of the question so yeah it’s a valid answer for the question.

yeah.. this answer pretty much is the simplest out there.. else positioning with absolute becomes mess out there

Nope, this cannot be done since opacity affects the whole element including its content and there’s no way to alter this behavior. You can work around this with the two following methods.

Secondary div

Add another div element to the container to hold the background. This is the most cross-browser friendly method and will work even on IE6.

:before and ::before pseudo-element

Another trick is to use the CSS 2.1 :before or CSS 3 ::before pseudo-elements. :before pseudo-element is supported in IE from version 8, while the ::before pseudo-element is not supported at all. This will hopefully be rectified in version 10.

Additional notes

Due to the behavior of z-index you will have to set a z-index for the container as well as a negative z-index for the background image.

Test cases

See test case on jsFiddle:

I’m super paranoid when it comes to using negative values with z-index.. but, i cant argue with results. Howevveer, i would add width: 100%; height: 100%; to the .bg so that ie6 can spread the bg inside the parent div. jsfiddle.net/sbGb4/2

@Lollero good point! z-index is a pain, but this should be relatively safe as long as you give the parent a positive index.

@Alon if you check that comment I wrote under your Question post. I have link there to another question that has several other options Including rgba Which is the css3 option. Heres quite good trick for older ie.. css-tricks.com/2151-rgba-browser-support

@Alon I added another method using the ::before pseudo-element. Was this the one you were looking for?

html

I implemented Marcus Ekwall’s solution but was able to remove a few things to make it simpler and it still works. Maybe 2017 version of html/css?

 
What is Lorem Ipsum?
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 
 

Источник

How to Change a CSS Background Image’s Opacity

opacity is a CSS property that allows you to change the opaqueness of an element. By default, all elements have a value of 1 . By changing this value closer to 0 , the element will appear more and more transparent.

A common use case is using an image as part of the background. Adjusting the opacity can improve the legibility of text or achieve the desired appearance. However, there is no way to target the background-image of an element with opacity without affecting the child elements.

In this article, you will be presented with two methods to work around this limitation for background images with opacity.

Prerequisites

If you would like to follow along with this article, you will need:

• Familiarity with opacity .
• Familiarity with position: relative and position: absolute .
• Familiarity with stacking context and z-index
• Familiarity with the :before and :after pseudo-elements.

Method 1 — Using a Separate Image Element and Positioning

The first approach will rely upon two elements. One is a “wrap” that provides a point of reference with position: relative . The second is an img element that appears behind the content with position: absolute and stacking context.

Here is an example of the markup for this approach:

div class="demo-wrap"> img class="demo-bg" src="https://assets.digitalocean.com/labs/images/community_bg.png" alt="" > div class="demo-content"> h1>Hello World!h1> div> div> 

And here are the accompanying styles:

.demo-wrap  overflow: hidden; position: relative; > .demo-bg  opacity: 0.6; position: absolute; left: 0; top: 0; width: 100%; height: auto; > .demo-content  position: relative; > 

This markup and styles will produce a result with text on top of an image:

Hello World!

The parent demo-wrap establishes an absolute positioning containing block. The demo-bg is set to position: absolute and assigned a slight opacity . The demo-content is set to position: relative and due to how the markup is arranged it has a higher stacking context than demo-bg . It is also possible to use z-index for finer control over the stacking context.

There are some limitations to this approach. It assumes that your image is large enough to accomodate the size of any element. You may need to enforce size limitations to prevent an image from appearing cut off or not covering the entire height of an element. It will also require additional adjustments if you want to control the “background position” and no clean “background repeat” alternative.

Method 2 — Using CSS Pseudo-Elements

The second approach will rely upon pseudo-elements. The :before and :after pseudo-elements are available to most elements. Typically, you would provide a content value and use it to append extra text at the beginning or end. However, it is also possible to provide an empty string and then you can utilize the pseudo-elements for designs.

Here is an example of the markup for this approach:

div class="demo-wrap"> div class="demo-content"> h1>Hello World!h1> div> div> 

And here are the accompanying styles:

.demo-wrap  position: relative; > .demo-wrap:before  content: ' '; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.6; background-image: url('https://assets.digitalocean.com/labs/images/community_bg.png'); background-repeat: no-repeat; background-position: 50% 0; background-size: cover; > .demo-content  position: relative; > 

This markup and styles will produce a result with text on top of an image:

Hello World!

The parent demo-wrap establishes an absolute positioning containing block. The pseudo-element :before is set to position: absolute , assigned a slight opacity , and uses background-size: cover to occupy all the available space.

This approach has the advantage of support for other background properties like background-position , background-repeat , and background-size . This approach has the disadvantage of using one of the pseudo-elements which may conflict with another design effect — like a clearfix solution.

Conclusion

In this article, you learned about two methods to work around this limitation for background images with opacity.

If you’d like to learn more about CSS, check out our CSS topic page for exercises and programming projects.

Want to deploy your application quickly? Try Cloudways, the #1 managed hosting provider for small-to-medium businesses, agencies, and developers — for free. DigitalOcean and Cloudways together will give you a reliable, scalable, and hassle-free managed hosting experience with anytime support that makes all your hosting worries a thing of the past. Start with $100 in free credits!

Источник