html - 在 HTML/CSS 中访问链接时使图像变成灰度

Question

我想要一个带有超链接的图像在链接被访问后变成灰度。这可以用 HTML/CSS 实现吗？

我首先尝试使用 img 标签，但似乎 CSS 无法控制 src 或类似的东西。我现在正在修改 div 类和 background-image 属性，但我似乎无法正确使用 :visited ，而且我不确定为什么。实际上，我不知道自己在做什么。如果有人能提供一个很酷的代码示例，那就太好了!

<a class="coolthing" style="background-image: url(https://i.imgur.com/eoem9Lk.jpg)" href="https://google.com/"></a>

.coolthing {
height: 100px
width: 200px
background-size: contain;
}
.coolthing:visited {
filter:grayscale(1)
}

我也试过:

<div class="coolthing" style="background-image: url(https://i.imgur.com/eoem9Lk.jpg)"><a href="https://google.com/"></a></div>

.coolthing {
height: 100px
width: 200px
background-size: contain;
}
.coolthing:visited {
filter:grayscale(1)
}

Answer 1

由于安全问题，浏览器限制了可以为 a:visited 链接设置的样式。

允许的样式是:

• 颜色
• 背景色
• 边框颜色(和单独的边框颜色 边)
• 轮廓颜色
• 列规则颜色
• 填充的颜色部分和 中风

来自 https://www.w3schools.com/cssref/sel_visited.asp