13.css精灵图

1.css精灵图:处理网页背景图像的方式。将所有零散的小图集中到一张大图中,然后将大图应用到网页,这时只需向服务器发送一次请求即可。
2.定位到精灵图中具体某个小图的位置使用:background-images、background-repeat、background-position属性来进行背景图像定位。
这里写图片描述
※x,y为距左上边框顶部的距离

<head>
    <style type="text/css">
        .box{
            width:24px;
            height:22px;
            background:url("tbbg.png") 0 -45px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

※精准的得到精灵图中小图的大小和位置:
这里写图片描述
先用选框框一个小图—然后右键“通过剪切新建位图”—窗口,打开层—选中新建的此位图,关闭层。
这里写图片描述

精灵图制作
fireworks—新建文档—画布颜色:透明—靠一边放置—保存为png格式文件

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值