一张图片位置不同显示不同内容

正常情况下
鼠标移到图片上后

原图片

重点

background-image: url(images/110.png);
background-position:bottom;
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a{
                width: 67px;
                height: 32px;
                background-image: url(images/110.png);
                display: inline-block;/*不加这句话,a的图片不会出来的*/
                
            }
            a:hover{
                background-image: url(images/110.png);
                background-position: bottom;
            }
        </style>
    </head>
    <body>
        <a href="#"></a>
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.4.5背景
    background-color background-color:#ff0000红色background-col...
    每日活菌阅读 568评论 0赞 0
  • 实用的60个CSS代码片段
    1、垂直对齐 如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，...
    kiddings阅读 3,329评论 0赞 11
  • cuda libXX.so文件缺失解决
    不知为何，mxnet调用时会指出libXX.so文件缺失，这时把lib64里的文件放入/usr/local/lib...
    Hermes777阅读 1,398评论 0赞 0
  • 三十而立
    将头右转，望着玻璃窗，我发现玻璃窗中印着房间里的白色灯光与小区外树叶隐隐遮住的黄色路灯，两者相互映衬，远近层次分明...
    之晴Queen阅读 410评论 3赞 1

友情链接更多精彩内容