Javascript 如何在鼠标上方使div的背景图像变暗

我有以下代码：

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

---

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

你可以用另一个图像来做

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

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

EDİT：

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

---

你可以用另一个图像来做

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

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

EDİT：

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

我希望这有帮助

我希望这有帮助

---

您可以使用css过滤器：

-webkit-filter: brightness(0.222);

有关过滤器的更多信息

---

希望这有帮助

您可以使用css过滤器：

-webkit-filter: brightness(0.222);

有关过滤器的更多信息

---

希望这有帮助

您可以在预选器和过滤器亮度

HTML

.xxxx:悬停：在{ 滤光片：亮度（0.3）； }

---

您可以在

预选器和过滤器
亮度之前使用

HTML

.xxxx:悬停：在{
滤光片：亮度（0.3）；
}

您可以使用：


线性梯度

嵌入阴影

背景混合模式

过滤，但此时忘记IE



h1{
背景：-webkit线性渐变（rgba（0,0,0,0），rgba（0,0,0,0）），url(http://lorempixel.com/100/100/abstract/10);
背景：线性渐变（rgba（0,0,0,0），rgba（0,0,0,0）），url(http://lorempixel.com/100/100/abstract/10);
}
h1：悬停{
背景：-webkit线性梯度（rgba（0,0,0,0.2），rgba（0,0,0,0.2）），url(http://lorempixel.com/100/100/abstract/10);
背景：线性渐变（rgba（0,0,0,0.2），rgba（0,0,0,0.2）），url(http://lorempixel.com/100/100/abstract/10);
}
h2，
h3，
h4{
背景：url(http://lorempixel.com/100/100/abstract/10);
}
h2：悬停{
框阴影：嵌入0.500px rgba（0,0,0,0.2）；
}
h3{
背景色：rgba（0,0,0,0.2）；
}
h3：悬停{
背景混合模式：颜色；
}
h4：悬停{
-webkit过滤器：亮度（80%）；
滤光片：亮度（80%）
}
标题
标题
标题
标题
您可以使用：


线性梯度

嵌入阴影

背景混合模式

过滤，但此时忘记IE



h1{
背景：-webkit线性渐变（rgba（0,0,0,0），rgba（0,0,0,0）），url(http://lorempixel.com/100/100/abstract/10);
背景：线性渐变（rgba（0,0,0,0），rgba（0,0,0,0）），url(http://lorempixel.com/100/100/abstract/10);
}
h1：悬停{
背景：-webkit线性梯度（rgba（0,0,0,0.2），rgba（0,0,0,0.2）），url(http://lorempixel.com/100/100/abstract/10);
背景：线性渐变（rgba（0,0,0,0.2），rgba（0,0,0,0.2）），url(http://lorempixel.com/100/100/abstract/10);
}
h2，
h3，
h4{
背景：url(http://lorempixel.com/100/100/abstract/10);
}
h2：悬停{
框阴影：嵌入0.500px rgba（0,0,0,0.2）；
}
h3{
背景色：rgba（0,0,0,0.2）；
}
h3：悬停{
背景混合模式：颜色；
}
h4：悬停{
-webkit过滤器：亮度（80%）；
滤光片：亮度（80%）
}
标题
标题
标题
标题
看看这个小标题
它能解决你的问题吗

你必须在图片上方放置另一个div（灰色或黑色），然后它在悬停时看起来会变暗

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

看看这一点
它能解决你的问题吗

你必须在图片上方放置另一个div（灰色或黑色），然后它在悬停时看起来会变暗

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

创建较暗版本的图像，并添加.xxxx:将鼠标悬停在CSS上，并将较暗的图像设置为背景。创建较暗版本的图像，并添加.xxxx：将鼠标悬停在CSS上，并将较暗的图像设置为背景。一些解释很有用，将是更好的答案。一些解释很有用，将是更好的答案。为什么只有前缀版本？这里的问题是答案只包含safari chrome解决方案。然而，过滤器仍然没有广泛的兼容性，不幸的是为什么只有前缀版本？这里的问题是答案只包含safari chrome解决方案。然而，过滤器仍然没有广泛的兼容性，不幸的是，这不起作用，我不确定，但可能是因为当我在图像上悬停时，我在dediv之前的链接上，你知道如何解决这个问题吗？它起作用了，我在代码上有一个typpo，但是有没有一种方法可以代替变暗，让它像褪色一样？只是为了保持更美丽？不。。你不能用这个来实现它。但是安德烈的回答是的，你可以在这里用安德烈的回答来做一把小提琴，以获得褪色效果@伯南普！如果你接受andrey的答案，那就更好了。这不起作用，我不确定，但可能是因为当我在图像上停留时，我在de div之前的链接上，你知道如何解决吗？它起作用了，我在代码上有一个typpo，但是有没有办法不只是变暗，而是让它像褪色一样变暗？只是为了保持更美丽？不。。你不能用这个来实现它。但是安德烈的回答是的，你可以在这里用安德烈的回答来做一把小提琴，以获得褪色效果@伯南普！不过，如果你接受安德烈的答案，那就更好了。这也不错，但如果背景图像有透明部分，那就不太好了。如果我错了，请纠正我。@jackjop尝试使用第一个，其中渐变颜色仅在悬停时更新，但是，是的，它将填充整个标记。这在问题中未指定：）。因为在这种情况下，您需要一个伪代码和一个过滤器，但是IE将被放在一边。如果你有一个半透明的png要分享，我也可以设置一个演示：）。我会在一对夫妇（喝咖啡）是的，我只是提到它。这也很好，但如果背景图像有透明的部分，它不应该做得很好。如果我错了，请纠正我。@jackjop尝试使用第一个，其中渐变颜色仅在悬停时更新，但是，是的，它将填充整个标记。这在问题中未指定：）。因为在这种情况下，您需要一个伪代码和一个过滤器，但IE将被保留为asi
.yyyy{ 
position:absolute;opacity:0;width: 400px;height: 300px;background-color: #000000;}
.yyyy:hover{
 opacity: 0.3;
}