how to change only one item in a class

Question

I just want the background image's opacity to be changed. Not the whole items like p. css:

#home{
background-image: url('../img/main.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
height:100%;
opacity: .8;
}

html:

<section id="home">
   <p>hi</p>
   <p>hi</p>
   <p>hi</p>
   <p>hi</p>
   <p>hi</p>
 </section>

http://stackoverflow.com/questions/10879045/how-to-set-opacity-in-parent-div-and-not-affect-in-child-div — jonathanmcdaniel, Jul 02 '15 at 14:03

Praveen Kumar Purushothaman · Accepted Answer · 2015-07-02T14:24:23.510

1

The rule opacity is for the element. Not for the background. If you need to do that way, you have two options:

Fake the background by using another div and use opacity on it.
Use two different images with one having lesser opacity.

There are a lot of hacks available:

CSS Opacity on Child Element
Using :after and styling it.

edited Jul 02 '15 at 14:24

answered Jul 02 '15 at 13:58

Praveen Kumar Purushothaman

164,888
24
203
252

score 0 · Answer 2 · answered Jul 02 '15 at 13:59

while there isnt any way to change the background opacity directly, there is hacky way of doing it.

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

taken from here

score 0 · Answer 3 · answered Jul 02 '15 at 14:00

I don't think there's any property for CSS background transparency.

What you could do is create a child element that fills the space, and apply the background and transparency to that element.

If you want to pure CSS solution, you can create the child element using the :before pseudo selector with an empty content field.

score 0 · Answer 4 · answered Jul 02 '15 at 14:23

If you're only wanting to change the opacity of a background image, it may be easier to actually save the image with a lower opacity, to avoid writing extra markup.

However, there are hacky work arounds that involve moving the 'child' elements over the top of the background using absolute positioning - there's a really useful article here.

how to change only one item in a class

4 Answers4