背景图片属性

backgroud-image

作用：

• 引入图片

格式：

background-image:url(“图片地址”)

特点：

• 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
• 如果背景的图片小于元素，则背景图片会自动在元素中平铺
• 如果背景的图片大于元素，则背景图片有一部分将不会显示

background-repeat

作用：

• 用来设置背景的重复方式

可选值：

• repeat：默认值，背景会沿着x轴、y轴双方向重复
• repeat-x：沿着x轴方向重复
• repeat-y：沿着y轴方向重复
• no-repeat：不重复

background-position

作用：

• 设置背景图片的位置

设置方式一：

• 通过top、left、right、center、bottom几个表示方位的词来设置位置
• 使用方位词时，必须指定两个值，如果只写一个，则第二个默认为center

设置方式二：

• 通过偏移量来设置图片的位置
• 两个值表示：水平方向的偏移量 竖直方向的偏移量

例如：

.box1{
    width: 500px;
    height: 500px;
    background-color: aqua;
    background-image: url('../example/10.jpg');
background-repeat:no-repeat;
background-position:  100px 300px;

}
1
2
3
4
5
6
7
8
9

效果：

解析：首先设置了盒子的高度和宽度，其次设置了背景颜色，然后引入图片，最后设置图片为不重复和图片的位置

background-clip

作用：

• 设置背景的范围

可选值：

• border-box：默认值，背景会出现在边框的下边
• padding-box：背景不会出现在边框，只出现在内容区和内边距
• content-box：背景只会出现在内容区

background-origin

作用：

• 背景图片的偏移量计算的原点

可选值：

• padding-box：默认值，background-position从内边距开始计算
• content-box：背景图片的偏移量从内容区处计算
• border-box：背景图片从边框处开始计算

对比如下：

background-size

作用：

• 设置背景图片大小

第一个值表示宽度，第二个值表示高度，只设置一个值，则第二个值默认为auto，即等比例放大缩小。
例如：

background-size:200px 100px;
1

可选值：

• cover：图片比例不变，将元素铺满。（有可能有的位置显示不全）
• contain：图片比例不变，将图片在元素中完整显示

background-attachment

作用：

• 背景图片是否随元素移动

可选值：

• scroll：默认值，背景图片会随元素移动
• fixed：背景图片会固定在页面中，不会随元素移动

设置全屏背景

  body{
        background-image:url('http://5b0988e595225.cdn.sohucs.com/images/20200107/d08b5a0928f44ec4bbc5ad7bb7015e05.jpeg');
        background-size:cover;
        background-attachment: fixed;
        background-repeat:no-repeat;
        background-position:center;
    }
1
2
3
4
5
6
7

雪碧图的制作

雪碧图：用于解决图片闪烁的问题
将多个小图片统一保存到一个大图片中，然后通过background-position来显示出。这样图片会同时加载到网页中，就可以有效避免出现闪烁的问题。
这种技术在网页中应用十分广泛，被称为CSS-Sprite，这种图我们成为雪碧图。

例一（不是雪碧图）;

 a:link{

display: block;
width: 50px;
height: 50px;
background-image: url(../example/6.png);
 }
 a:hover{
    background-image: url(../example/7.png);
 }
 a:active{
    background-image: url(../example/8.png);
 }
1
2
3
4
5
6
7
8
9
10
11
12
13

例二（雪碧图格式）:

 a:link{

display: block;
width: 50px;
height: 50px;
background-image: url(../example/6.png);
 }
 a:hover{
   background-position: -90px 0;
 }
 a:active{
    background-position: -180px 0;
 }
1
2
3
4
5
6
7
8
9
10
11
12
13

线性渐变

通过渐变可以设置一些复杂的背景颜色，可以从一个颜色向其他颜色过滤的效果。

渐变是图片！！！，需要通过backg-image来设置

作用：

颜色沿着一条直线发生变化

语法：

background-image: linear-gradient(颜色一，颜色二,颜色三…)；

例如：

 background-image: linear-gradient(red,yellow)
1

解释：红色在开头，蓝色在结尾，中间是过度区

线性渐变的开头，可以指定一个渐变的方向

• to left：向左渐变
• to right：向右渐变
• to bottom：向下渐变
• to top：向上渐变
• deg： 旋转度数
• turn：表示圈

渐变可以同时多个颜色，多个颜色默认情况下平均分配，也可以手动指定渐变的分布情况。

background-image: repeating-linear-gradient()表示可以平铺的线性渐变

例如：