如何使用图像将伪类“：visited”设置为样式？

Question

我想在这里实现的目标：

1. 我想要一个带有“打印”的橙色方块作为未触摸状态。
2. 滚动时我希望女孩形象出现。
3. 点击后我希望女孩形象保持为访问状态。

我得到的只是翻转状态，没有访问状态。

http://codepen.io/Chris-Brennan/pen/eNaxQY?editors=110

.dwight:hover {
  content: url('http://s18.postimg.org/eadl79djp/dwight.png');
}
.dwight:visited {
  content: url('http://s18.postimg.org/eadl79djp/dwight.png');
}

<a class="dwight" href="#"><img src="http://s16.postimg.org/ph8f6jedt/print.png"/></a>

Answer 1

出于隐私原因，浏览器严格限制您可以使用:visited-pseudo-class选择的元素应用的样式：

• 颜色
• 背景颜色
• 边框颜色
• 底部边框颜色
• 左边框的颜色
• 右边框的颜色
• 边框顶部的颜色
• 轮廓色
• 列治色
• 填
• 行程

另请注意，alpha组件将被忽略。替代地使用未访问规则的alpha分量（除了不透明度为0时，在这种情况下忽略整个颜色，并且使用未访问规则之一。

https://developer.mozilla.org/en-US/docs/Web/CSS/:visited

https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector

我也有类似的问题。 :)