在 CSS 中使用多个背景仅将灰度应用于一个背景图像？

Question

是否可以让两张背景图片在悬停时只让其中一张变为黑白？

这里有一个例子：

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background-image: url(img1.gif), url(img2.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, no-repeat;
  height: 100px;
}
</style>
</head>
<body>
<div id="example1"></div>

</body>
</html>

我尝试使用 filter: grayscale(100%); 但不知道如何仅将其应用于 img1.gif 而不是 img1.gif & img2.gif

Answer 1

我不确定这是不是你想要的，但这是我做的：

<!DOCTYPE html>
<html>
<head>
<style> 
#example1  {
  background-image: url("img1.jpg"), url("img2.jpg");
  background-position: right bottom, left top;
  background-repeat: no-repeat, no-repeat;
  height: 100px;
  filter: grayscale(0%);

}
#img1:hover{
    filter: grayscale(100%);
}


</style>
</head>
<body>
<div id="example1">
  <div><img src="img1.jpg" alt="" id="img1"></div>
  <div><img src="img2.jpg" alt=""></div>
</div>

</body>
</html>

Answer 2

这有点 hack-y 但您可以添加包含“悬停”照片的叠加层并向其添加灰度滤镜。看看这个例子——它只使用了 2 张图片，而且都是彩色的。

（仅供参考，我已经为这个例子指定了 div 的高度和宽度，但这不是必需的）

#example1 {
background-image: url(https://lorempixel.com/output/nature-q-c-200-200-2.jpg), url(https://lorempixel.com/output/nature-q-c-200-200-5.jpg);
  background-position: right bottom, left top;
  background-repeat: no-repeat, no-repeat;
  height: 200px;
  width:400px;
  position:relative;
  border:1px solid #ccc;
}

#example1:hover:before {
  background-image: url(https://lorempixel.com/output/nature-q-c-200-200-5.jpg);
  background-position: left top;
  background-repeat: no-repeat;
  filter: grayscale(100%);
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;  
  z-index:10;
}

<div id="example1"></div>

基本上，我们使用 before 创建一个 absolute-positioned 叠加层，覆盖 div 的完整尺寸（无论它是什么尺寸）。这仅包含与主 div 相同位置的要“变灰”的图像。它仅在悬停时使用 #example1:hover:before.

激活

在 CSS 中使用多个背景仅将灰度应用于一个背景图像？

Applying gray scale only to one background image using Multiple Backgrounds in CSS?

html

css

filter

grayscale