（10）背景图片操作

精灵图的概念：w3school网站的菜单鼠标悬浮切换就是采用背景大图实现的，页面中每一个部分都可以是一张小图，就是选中大图的一张小图进行切换，这个大图就叫精灵图

右键检查 -> sources -> ui2017 -> bg.png

PS：为什么用大图不用小图，因为程序中最耗时的就是在网络传输之后进行的I/O操作，如果都是用小图，那么就不停的进行I/O操作，这样当小图量达到一定量的时候，难免会影响页面加载的速度，用大图只要做一次请求，就获得所有的资源，这样加载的速度就会很快

PS：精灵图操作永远是上移或者左移，就是负值，如果正值就会出现空白区域

1、基本的功能

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>精灵图的操作</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background-color: yellow;

            /*加载背景图片*/
            background-image: url("img/bg.png");

            /*处理平铺:repeat-x就是x轴平铺 | repeate-y就是y轴平铺 | no repeate就是没有平铺*/
            background-repeat: no repeat;

            /*背景尺寸(这个不常用)，会缩放背景图*/
            /*background-size: 100px 200px;*/

            /*背景定位，往右移10（x轴左右偏移）、往下移20（y轴上下偏移）（-10、20往左移10，往下移20）*/
            background-position: 10px 20px;

            /*以上所有功能的简写方法:这叫整体赋值*/
            background: url("img/bg.png") red no-repeat 10px 20px;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

2、精灵图操作实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>精灵图的操作</title>
    <style>
        body{
            background-color: black;
        }
        .ele{
            width: 372px;
            height: 90px;
            background-color: red;
            /*这里使用参数简写：下面的图片移动写了一个0，没有px，0和px是一样的*/
            background: url("img/bg.png") no-repeat 0 -155px;
            /*加了这个就变成网上滚动的效果*/
            transition: 1s;

        }
        .ele:hover{
            /*这里添加一个鼠标悬停动画效果，y轴上移*/
            background-position-y: -255px;
            /*这里添加一个鼠标样式*/
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div class="ele"></div>
</body>
</html>

（10）背景图片操作

猜你喜欢