按钮练习(二)

将按钮的不同形态合成一张图片,并将其加入我们的项目中。

          <style>

                    a: link{
                               display:block;

                                width:93px;

                               height:29px;

                               background-image:url(合成图片的链接)

                              }

                    a:hover{
                               background-position:-93px 0;

                              }

                   a:active{
                               background-position:186px  0;

                              }

     解决图片闪烁的问题

可以将多个小图片统一保存到一个大图片中,然后

通过调整background-position来显示的图片。

这样图片就会同时加载到网页中,就可以有效的避

免出现闪烁的问题。

【这个技术在网页中应用十分广泛,被称为CSS-Sprite,这种图我们称为雪碧图。】

           </style>

</head>

<body>

            <a  href=“javascript:;”></a>

</body>

 

雪碧图的使用步骤

1先确定要是用的图标

2测量图标的大小

3根据测量结果创建一个元素。

4将雪碧图设置为元素的背景图片

5设置一个偏移量以显示正确的图片

 

雪碧图的特点

一次性将多个图片加载进页面,降低请求的次数,加快访问速度,提升用户体验。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值