背景图片属性

属性名称 属性作用 值
background-color 背景图片颜色 color
background-image 背景图片 url(‘1.png’);
background-repeat 平铺方式 repeat 、 no-repeat 、 repeat-x 、 repeat-y
background-position 图片位置 left、 right、 top、 bottom、 center
background 简写（顺序不能错） background: green url(1.jpg) no-repeat left bottom; 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style>
            body {
                background-image: url("img/banner.jpg");
                background-repeat: no-repeat;
                background-position: left top;
                /*是否跟最滚动*/
                background-attachment: fixed;
            }
            .d1 {
                width: 100%;
                height: 400px;
                /*background-color: green;*/
                /*background-image: url('img/bf.png');*/
                /*background-repeat: no-repeat;*/
                /*center 默认的是x轴  y轴默认居中*/
                /*跟数学的坐标系是不同的，x轴为正 ，y轴向下正 */
                /*background-position: -35px 30%;*/
                background: green url("img/bf.png") no-repeat right 200px fixed;
                /*如果设置了fixed 那么背景图片的位置将会基于body*/
                /*background-attachment:fixed;*/
                /*精灵图片 雪碧图 做案例的时候再补充*/
                background-color: purple;
            }
            .d2 {
                width: 100%;
                height: 1000px;
                background-color: pink;
                /*透明度 ： 0~1  */
                opacity: 0.5;
            }
        </style>
    </head>
    <body>
        <!-- div 是一个标签，不表示任何的内容，没有自带样式。只是用于划分结构 -->
        <div class="d1"></div>
        <div class="d2"></div>
    </body>
</html>

1. 背景尺寸 background-size

background-size设置背景图片的尺寸

cover 会自动调整图片大小,保证图片比例不变没有形变拉伸,同时保证图片始终填充满背景区域,如有溢出部分则会被隐藏

contain 会自动调整图片大小,保证图片比例不变没有形变拉伸,保证图片始终完整显示在背景区域,可能会填不满盒子有留白

/* 关键字 */
background-size: cover
background-size: contain

/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto     /* 不同于background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;

2. CSS Sprite

CSS Sprites也叫CSS精灵、CSS雪碧图，是一种网页图片应用处理方式。 通过这种方式我们可以将网页中的零星图片集中放到一张大图上。这样一来，一次请求便可以同时加载多张图片，大大提高了图片的加载效率。

客户端每显示一图片都会向服务器发送请求，所以图片越多请求越多，造成延迟的可能性越大。所以页面有许多icon时，推荐使用CSS Sprite。

CSS Sprite原理：
其实就是把网页中的一些背景图片整合到一张图片文件中，再利用background-image、background-repeat、background-position属性，对这张大图进行定位。background-position可以用数字能精确的定位出背景图片的位置。

CSS Sprite优点：

  1. 很好地减少了网页的http请求，从而大大的提高了页面的性能，其被广泛传播和应用的主要原因；
  2. 能减少图片的字节，(网络传输以字节为单位 ，1MB=1024千字节)，三张图片大小的总合大于拼成一张图片的大小。
  3. 解决了命名困扰，只需要对一张图片命名，而非数十个小图片命名

用一句话来概述就是 “CSS Sprites(图片整合技术) 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。

文档更新时间: 2023-01-10 10:35   作者：孙老师