Question

我有这段代码：

<a style="text-decoration:none;" href="https://www.google.pt"> 
  <div class="xxxx">
    <h3 style="color:#FFFFFF; padding-top:25%;">Bla bla bla bla</h3>
  </div> 
</a>

使用这个CSS类：

.xxxx{
  text-align:center;
  vertical-align:middle;
  background-image:url(images/img.jpg);
  max-width:100%;
  width:400px;
  height:300px;
}

我的问题是，当鼠标结束时，我应该怎么做才能使div的背景图像变暗，而只是图像，文本保持不变。

Answer 1

您可以使用css 过滤器：

-webkit-filter: brightness(0.222);

有关过滤器的更多信息https://davidwalsh.name/demo/css-filters.php

希望这有帮助！

Answer 2

您可以使用其他图片

.xxxx:hover
{
    background-image:url(images/img_darker.jpg);
}

其中img_darker是您使用的img的较暗版本。

编辑：

a:hover .xxxx{
   background-image:url(images/img_darker.jpg);
}

Answer 3

我希望这会有所帮助

http://jsfiddle.net/audetwebdesign/8QMTv/

 <button class="btn-img">
        <div class="img-wrap">
        <img src="http://upload.wikimedia.org/wikipedia/en/thumb/2/2a/Burj_Al_Arab,_Dubai,_by_Joi_Ito_Dec2007.jpg/220px-Burj_Al_Arab,_Dubai,_by_Joi_Ito_Dec2007.jpg" alt="Dubai" />
        </div>
    </button>

.btn-img {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    background-color: white;
    outline: 1px dotted blue;
}
.btn-img .img-wrap {
    margin: 10px;
}

.btn-img img {
    display: block;
}

.btn-img:hover .img-wrap {
    background-color: black;
}

.btn-img:hover img {
    opacity: 0.8;
}

Answer 4

你可以使用：

线性渐变
插入阴影
背景 - 共混 - 模式
过滤但此时忘记了IE

＆＃13;

h1 {
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(http://lorempixel.com/100/100/abstract/10);
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(http://lorempixel.com/100/100/abstract/10);
}
h1:hover {
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(http://lorempixel.com/100/100/abstract/10);
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(http://lorempixel.com/100/100/abstract/10);
}
h2,
h3,
h4 {
  background: url(http://lorempixel.com/100/100/abstract/10);
}
h2:hover {
  box-shadow: inset 0 0 0 500px rgba(0, 0, 0, 0.2);
}
h3 {
  background-color: rgba(0, 0, 0, 0.2);
}
h3:hover {
  background-blend-mode: color;
}
h4:hover {
  -webkit-filter: brightness(80%);
  filter: brightness(80%)
}

＆＃13;

<h1>title</h1>
<h2>title</h2>
<h3>title</h3>
<h4>title</h4>

＆＃13;

codepen to play with

你可以使用gradinets给一些效果悬停在背景http://codepen.io/gcyrillus/pen/rexVWR添加/删除渐变，改变颜色，改变背景大小，实际上你可以在背景图像上放置任何图案：）

Answer 5

您可以使用before预选器并过滤brightness

HTML

<a style="text-decoration:none;" href="https://www.google.pt"> 
  <div class="xxxx">
    <h3 style="color:#FFFFFF; padding-top:25%;">Bla bla bla bla</h3>
  </div> 
</a>

CSS

.xxxx{
  text-align:center;
  vertical-align:middle;
  max-width:100%;
  width:400px;
  height:400px;
  z-index:100;
  position:relative;
}
.xxxx:before{
  position:absolute;
  max-width:100%;
  width:400px;
  height:400px;
  top:0;
  left:0px;
  content:" ";
  background-image:url(https://images.blogthings.com/thecolorfulpatterntest/pattern-1.png);
  z-index:1;
}
h3{
  z-index:100;
  position:relative;
}

.XXXX：悬停：前{ 滤光片：亮度（0.3）; }

Example

Answer 6

看看这个小Fiddle 它能解决你的问题吗？

你必须在picutre上方放置另一个div（灰色或黑色），然后在盘旋时它会变得更暗。

.yyyy{ 
position:absolute;opacity:0;width: 400px;height: 300px;background-color: #000000;}
.yyyy:hover{
 opacity: 0.3;
}

在鼠标悬停时如何使div的背景图像变暗

6 个答案: