悬停时的CSS不透明度问题

Question

这是我的小提琴：http://jsfiddle.net/Vbtts/2624/ 这是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>

和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}

我想在悬停状态下实现的是对背景图像进行不透明度，但不对文本进行遮盖（在标签和h2上）。我怎样才能做到这一点 ？谢谢

Answer 1

你做不到。您有两种不同的解决方案：

1）在Photoshop / GIMP中将png背景图像设为0.7不透明度并使用黑色背景：

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

使用此模式，您可以使用#000背景颜色将不透明度模拟为100％，并在悬停时将其移除以使背景变为半透明。

2）两个不同的div：

如果你写了类似的结构：

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

您可以将背景放在绝对位置和文本上方。

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

::after或::before解决方案：

我可以用你的小提琴来实现这个目标：

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

但我讨厌负z-index，所以我建议你不要这样做。

Answer 2

我更新了你的jsfiddle， 使用前后元素

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

如果你要避免负z-index，你也可以这样做： http://jsfiddle.net/Vbtts/2640/

Answer 3

没有CSS属性background-opacity，但你可以通过插入一个具有常规不透明度的伪元素来伪造它，后面是元素的确切大小。使用此方法时，不需要更改HTML。

<% @columns.each do |column| %>
    <td><%= column.name %></td>
<% end %>

我在这里更新了你的jsfiddle：https://jsfiddle.net/Vbtts/2625/

参考：https://css-tricks.com/snippets/css/transparent-background-images/

Answer 4

不透明度会影响孩子，因此不透明度很难达到你想要的效果。

解决方法是将带有rgba的渐变添加到背景图像中。这实际上是悬停时显示的不可见图像叠加。

隐形层：

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

悬停时添加了不透明度：

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

小提琴 - http://jsfiddle.net/5gnk28ah/1/

Answer 5

你应该使用绝对定位。使用它你可以将图像放在文本后面而不包装它。

我改变你的小提琴如下：

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

我希望它能告诉你如何做到这一点：）