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

问题描述

是否有两个背景图像在悬停时仅使其中一个成为黑白图像？

这是一个示例：

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

解决方法

这有点让人讨厌，但是您可以添加一个包含“悬停”照片的叠加层，并为其添加灰度滤镜。看一下这个示例-它仅使用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创建一个绝对位置的覆盖层，该覆盖层覆盖了div的整个大小（无论大小如何）。它仅包含与主div相同位置的“变灰”图像。仅在悬停时使用#example1:hover:before激活它。

我不确定这是否是您想要的，但这就是我做的：

for file in searchPath.rglob("*"):
    if file.name.endswith(keepExt):
        print(file)
        name = (os.path.splitext(file.name)[0])
        newFolder = os.path.join(rootdir,name)
        os.mkdir(newFolder)
        print("Made File Directory: " + newFolder)
        destination = os.path.join(newFolder,name) + '.mkv'
        shutil.move(file,destination)

filter grayscale html

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

问题描述

解决方法

相关问答