精灵图的使用方法

 精灵图，背景图，图片是一个网页的重要组成部分，所以学习与整理就变得有点重要了。

精灵技术的使用

 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

制作精灵图

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。

大部分情况下，精灵图都是网页美工做。

我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
我们精灵图的宽度取决于最宽的那个背景。 
我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。
在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。

 

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 25px;
            height: 25px;
            background: url("images/taobao.png");
            background-position: 0px 0px;
        }
        div:hover {
            background-position: 0px -89px;
        }

        /*如果使用精灵图:坐标:只有0或者负数*/
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 

二：背景图片和插入图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>40-css背景图片和插入图片的区别.html</title>
    <style>
        div{
            width: 200px;
            height:200px;
            background-color: red;
        }
        .box1{
            background-image: url("images/image.png");
            background-repeat: no-repeat;
            background-position: right bottom;
        }
    </style>
</head>
<body>

<!--
    1,背景图片和插入图片的区别?
    (1),背景图片仅仅是一个装饰,你不会占用位置,插入图片会占用位置
    (2),背景图片有定位属性,很方便的控制图片的位置,插入图片没有定位属性
    (3),插入图片的语义比背景图片的语义要强,所以在企业开发中你的图片如果从想让搜索引擎收录,那么推荐使用插入图片
-->
<div class="box1">我是一个文字</div>
<div class="box2">
    <img src="images/image.png" alt="">
    我是文字
</div>
</body>
</html>

 

 

 

 

 

 

posted @ 2018-08-05 11:52  Fanyee  阅读(4973)  评论(0)  编辑  收藏  举报