CSS精灵

仙鹤__

已于 2023-04-03 23:21:14 修改

阅读量227

点赞数

文章标签： css 前端 javascript

于 2023-04-03 23:09:07 首次发布

本文链接：https://blog.csdn.net/weixin_52629158/article/details/129942124

版权

css精灵，又叫css背景精灵。

“css精灵”，英语css sprite，所以也叫做“css雪碧”技术。是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

css精灵有什么优点，就是减少了http请求。比如4张小图片，原本需要4个http请求。但是用了css精灵，小图片变为了一张图，http请求只有1个了。

淘宝网的精灵图：

用fireworks精确控制精灵:

例如：我们要显示“爱逛街”这个小图。

(1) 先在原图（淘宝网的精灵图），用切片，框选出你要显示图的大小（你用切片框选出矩形的宽度和高度，等价于你再页面中给盒子设置width和height）。

(2) 我们使用fireworks中的切片绘制矩形。用矩形的宽度和高度，表示当前小图向左移动量和向上移动量。

 <style>
        .logo1{
            width: 141px;
            height: 36px;
            outline: 1px dashed red;
            background-image: url('./img/taobao.png');
            background-repeat: no-repeat;
            background-position: 0px 0px;
        }
         .logo2{
        width: 54px;
        height: 20px;
        margin:10px auto;
        outline:1px dashed red;
        background-image:url('./img/taobao.png');
        background-repeat:no-repeat;
        background-position: -91px -79px;
    </style>
</head>
<body>
    <div class="logo11"></div>
    <div class="logo12"></div>

预览：

1.4.3 用单词描述background-position的值

用单词描述

background-position: 描述左右的词儿描述上下的词儿;

描述左右的词儿： left、 center、right

描述上下的词儿： top 、center、bottom

<style>
        .box{
            width: 800px;
            height: 800px;
            border: 10px solid blue;
            margin: 0 auto;
            margin-top: 20px;
            background-image: url('./img/a.jpg');
            background-repeat: no-repeat;
            /* 用单词表示 几个特殊的定位点 */
            /* 左上角 */
            /* background-position: left top; */

            /* 右上角 */
            /* background-position: right top; */

            /* 左下角 */
            /* background-position: left bottom; */

            /* 右下角 */
            /* background-position: right bottom; */

            /* 中间 */
            /*background-position: center center; */

             /* 垂直居中，左对齐 */
            /* background-position: left center; */

            /* 垂直居中，右对齐 */
            background-position: right center;
        }
    </style>
</head>
<body>
    <div class="box"></div>

1.4.4 大背景图居中

（1）大背景图当body的背景，并且设置这个图居中显示。

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #051022;
            background-image: url('./img/bg1.jpg');
            background-repeat: no-repeat;
             /* 我们希望大背景图，在水平方向上居中 在垂直方向上居定（意思就是这个图垂直方向不动） */
            background-position: center top;
        }
    </style>
</head>
<body>
    
</body>

预览：

（2）大背景图当通栏banner的背景，并且设置这个图居中显示。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .banner{
            width: 100%;
            height: 671px;
            background-image: url('./img/banner1.jpg');
            background-repeat: no-repeat;
            background-position: center top;
        }
    </style>
</head>
<body>
    <div class="banner"></div>

1.5 background-attachment背景是否固定

背景是否固定。background-attachment:fixed;背景就会被固定住，不会被滚动条滚走。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            *{
                margin: 0;
                padding: 0;
            }
            .container{
                width: 100%;
                height: 2500px;
                background-color: lightblue;
                padding-top:260px;
            }
            .container .ad{
                width:100%;
                height: 350px;
                /* background-image:url('./img/banner.png');
                background-repeat: no-repeat;
                background-position: center;
                background-attachment:fixed; */

                /* background综合属性 */
                background:lightblue url('./img/banner.png')no-repeat center fixed;
            }
            </style>
</head>
<body>
        <div>
                <div></div>
            </div>
</body>
</html>

预览：