css sprite如何使用

PHP中文网 JavaScript 百度已收录

当前第2页 返回上一页

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<style>

       .box {

         width: 600px;

         height:300px;

         border: 3px solid #ccc;

         background-color: #8064A2;

        }

        span {

         display: inline-block;

         width: 25px;

         height: 25px;

         border: 3px solid #ccc;

         background-image: url(css/img/sidebar.png);

         background-repeat: no-repeat;

         margin: 5px;

        }

       .icon1 {

         background-position: 0 0;

        }

       .icon2 {

         background-position: -40px 0;

        }

       .icon3 {

         background-position: 0 -25px;

        }

       .icon4 {

         background-position: -40px -25px;

        }

</style>

效果图：

41e8dfe1cf8063feb95d917bc9175d4.png

CSS Sprites 的优点：

1、减少图片的字节

2、减少了网页的http请求，从而大大的提高了页面的性能

3、减少命名难的问题。

4、维护起来更加方便。

CSS Sprites 的缺点：

1、在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

2、CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。

以上就是css sprite如何使用的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

手把手教你使用img标签添加图片效果（知识）

为什么要初始化css代码

css上下间距怎么调

css怎么加注释？

什么是sass?如何使用sass？

css如何实现div闪烁

bootstrap 如何修改css样式

css字体溢出怎么隐藏

css实现横向与竖向进度条效果的方法

怎么查看网站的css

更多相关阅读请进入《css》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...