悬停时的CSS不透明度问题

Question

This is my fiddle: http://jsfiddle.net/Vbtts/2624/ This is the html:

    <a href="#" class="col-xs-6 col-sm-4 big-container with-background">
        <div class="bottom-align">
            <label class="uppercase">preséntation</label>
            <h2>Une entreprise<br> intégrée pour<br> contrôler la qualité<br> de toutes les étapes<br> des projets></h2>
        </div>
   </a>

and the css:

.with-background{width:100%;background:url(https://cask.scotch.io/2015/04/scotch-box-sidebar.png);display:block;height:200px;}
.with-background:hover{opacity:0.7}

What i want to achieve on hover state is to do an opacity on the background image, but NOT on the text (on label and h2). How can i do that ? Thx

Answer 1

You can't. You have got two different solutions:

1) Make the png background image 0.7 opacity in Photoshop/GIMP and put wit a black background:

 .background {
      background: url(your-semitransp.png) #000;
 }
 .background:hover {
      background-color: transparent;
 }

With this mode you can emulate the opacity to 100% with the #000 background color, and in hover remove it to make the background semitransparent.

2) Two different divs:

If you write a similar structure:

<div class="wrap">
   <div class="background"></div>
   <div class="text"></div>
</div>

You can put background in absolute positioning and text above it.

 .wrap { position : relative; }
 .background {
     position :absolute;
     top: 0;
     left: 0;
     z-index: 0;
 }
 .text {
     position :absolute;
     top: 0;
     left: 0;
     z-index: 1;
 }
 .wrap:hover .background{ 
     opacity: 0.7;
 }

The ::after or ::before solution:

I can achieve that with your fiddle:

http://jsfiddle.net/Vbtts/2632/

But I hate negative z-index, so I can't recommend you to make that.

Answer 2

I updated your jsfiddle, use a before or after element

.with-background{
  width:100%;
  display:block;
  height:200px;
  position: relative;
}
.with-background:before{
  width:100%;
  background:url(https://cask.scotch.io/2015/04/scotch-box-sidebar.png);
  display:block;
  height:100%;
  content: " "; 
  position: absolute;
  top:0;
  left:0;
  z-index: -1;
}
.with-background:hover:before{opacity:0.2}

http://jsfiddle.net/Vbtts/2635/

if however you what to avoid negative z-index you may also do this: http://jsfiddle.net/Vbtts/2640/

Answer 3

There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it. When using this method, altering the HTML is not needed.

.with-background::after {
  content: "";
  background: url(https://cask.scotch.io/2015/04/scotch-box-sidebar.png);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

.with-background:hover::after {
  opacity: 0.7;
}

I updated your jsfiddle here: https://jsfiddle.net/Vbtts/2625/

Reference: https://css-tricks.com/snippets/css/transparent-background-images/

Answer 4

Opacity affects children, so what you want is difficult to achieve with opacity.

A workaround would be to add a gradient with rgba to the background image. This is effectively an invisible image overlay that is shown on hover.

Invisible layer:

 .with-background {  
                  background: linear-gradient(
                              rgba(255, 255, 255, 0), 
                              rgba(255, 255, 255, 0) ), 
                              url('https://cask.scotch.io/2015/04/scotch-box-sidebar.png');
}

Opacity added on hover:

.with-background:hover {
                 background: linear-gradient(
                             rgba(255, 255, 255, 0.4), 
                             rgba(255, 255, 255, 0.4)), 
                             url('https://cask.scotch.io/2015/04/scotch-box-sidebar.png') ;
}

Fiddle - http://jsfiddle.net/5gnk28ah/1/

Answer 5

You should use absolute positioning. Using it you could place the image behind the text without wrapping it.

I've change your fiddle as follow:

<a href="#" class="col-xs-6 col-sm-4 big-container">
  <div class="with-background"></div>div>
    <div class="bottom-align">
                            <label class="uppercase">preséntation</label>
                            <h2>Une entreprise<br> intégrée pour<br> contrôler la qualité<br> de toutes les       étapes<br> des projets></h2>
                        </div>

                    </a>

CSS:

.with-background{width:100%;background:url(https://cask.scotch.io/2015/04/scotch-box-sidebar.png);display:block;height:200px; position: absolute; }
.with-background:hover{opacity:0.7}
.bottom-align {position: absolute; }

I hope that it shows you the way how do it :)