CSS_超链接状态样式切换&雪碧图

矫情吗；* 2023-10-06 16:51 1阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70]

解决图片闪烁

a:link{
    	display: block;
    	width:93px;
    	height: 29px;
    	background-image: url(' ./img/08/link .png )
    }
    a: hover{
    	background-position: -93px 0;
    }
    a:active{
    	background-position: -186px 0;
    }
    /*
    解决图片闪烁的问题:
    可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示不同位置的图片
    这样图片会同时加载到网页中就可以有效的避免出现闪烁的问题
    这个技术在网页中应用十分广泛，被称为CSS-Sprite
    
    雪碧图的使用步骤:
    1.先确定要使用的图标
    2.测量图标的大小
    3.根据测量结果创建一个元素
    4.将雪碧图设置为元素的背景图片
    5.设置一个偏移量以显示正确的图片
    
    雪碧图的特点:
    	一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验
    
    */

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210513211211313.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70