背景图像:for :visited links?

2022-01-10 00:00:00 css-selectors css

是否可以将 background-image: 属性添加到访问的链接?

Is it possible to add the background-image: property to visited links?

 a.coolLinks:visited{
     background-image:url("http://www.ledr.com/colours/black.jpg");
}

谢谢

所以这似乎是一个安全漏洞，这就是它无法完成的原因.没有迹象表明浏览器阻止了这种 CSS 样式.

So it appears that this is a security vulnerability and this is why it cannot be done. There was no indication that the browsers were blocking this css style.

推荐答案

根据大多数规范，您的代码是正确的.但是，许多浏览器会考虑访问链接上的背景图片可能侵犯用户隐私，所以他们不允许这样做.

Your code is correct according to most specifications. However, many browsers consider background images on visited links a potential violation of user's privacy, so they do not allow it.

观察这个例子:

<p><a href="/unvisited">Unvisited link</a></p>

<p><a href="http://jsfiddle.net/">Visited Link</a></p>

<style>
a {
  background:red url("http://placekitten.com/100/101?image=2") center center no-repeat;
  display: block;
  height: 200px;
  width: 200px;
  overflow: hidden;
  text-align: center;
  background-color: red;
}

a:visited {
  background:blue url("http://placekitten.com/100/100?image=1") center center no-repeat;
}
</style>

(也位于 http://jsfiddle.net/Yq5GY/1/).Firefox 忽略访问链接的背景图像声明，并且从不显示独奏小猫.您可以使用背景颜色进行一些区分.无论如何，仅依赖图像的可用性很差.

(Also at http://jsfiddle.net/Yq5GY/1/). Firefox ignores the background image declaration for visited links, and never displays the solo kitten. You can do some differentiation with background color. It's bad usability to rely on images alone, anyhow.

相关文章