如何解决在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)
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。