visited伪类如何添加背景图

希望实现这样的效果,当一个链接被访问过后,链接区域出现一个特定背景图,以向用户突显其被访问过的特征。但是始终无法正确显示。

补充:如果将背景图挪到hover中可以看到背景图,但是放在visited中始终无效

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta   http-equiv="expires"   content="0">
    <meta   http-equiv="cache-control"   content="no-cache">
    <meta   http-equiv="pragma"   content="no-cache">
    <title>document</title>
    <style type="text/css">
        a{
            display: inline-block;
        }
        a:link{
            background-color: #0f0;
        }
        a:hover{
            text-decoration: none;
            border:1px solid #ccc;
            /*放置在hover中能看到*/
          /*background: url("images/ok1.png") no-repeat 0 0 ;*/
        }
        a:visited{
            text-decoration: none;       
            background: url("images/ok1.png") no-repeat 0 0 ;
           /* background-color: #00f;  */ /*背景色能看到*/   
        }
        .circle{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            line-height: 50px;
            text-align: center;
        }
        
    </style>
</head>
<body>
    <div>This is a <a  href="#"  class="circle">link</a></div>
</body>
</html>


MichaelJackson
浏览 1360回答 1
1回答

橋本奈奈未

只有下列的属性才能被应用到已访问链接:colorbackground-colorborder-color (and its sub-properties)outline-colorfill 和 stroke 属性的颜色部分此外,即便是上述样式,你也不能给访问过和未访问过设置不同的透明度。你不能使用rgba()、hsla()或是 transparent 关键词。——摘取自MDN
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5
CSS3