css 设置背景的属性主要有以下几个:

background-image:设置背景图片,但必须设置元素宽高
background-repeat:设置背景图片是否平铺,以及如何平铺
background-size:设置背景图片在元素中的大小,
background-position:设置背景图片的偏移量
background-attachemnt:决定背景图像的位置是在视口内固定,或者随着他的区块滚动
background:缩写属性,可将上述的属性在这个属性里统一设置

background-image

要点:

background-image 用于设置元素的背景图片,它的主要特点是

会盖在(不是覆盖)background-color的上面
background-image 可以给同一个元素设置多张图片
如果设置了多张图片

设置的第一张图片将显示在最上面,其他图片按顺序层叠在下面

注意: 如果设置了背景图片后,元素没有具体的宽高,背景图片是不会显示的

这里先准备一张图片:

演示一:只设置背景图片不设置背景图片的宽高

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        background-image: url(./back1.png);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

然后你会看到一个白板,不要迷糊,因为你没设置宽高,在开发中要注意这点,避免设置背景不生效的情况.

很白吧,哈哈,看着难受就记住它.

演示二:background-image 只是盖在背景颜色上,并不会覆盖背景颜色.

修改上面的css 样式,来演示这一点

css 复制代码

.box {
    background-color: aquamarine;
    background-image: url(./back1.png);
    width: 100px;
    height: 100px;
    /* 暂时不看 */
    background-repeat: no-repeat;
    background-position: 10px 10px;
    background-size: 50px 50px;
  }

可以看到背景颜色属性并没有因为加上了background-image 而消失效果.

演示三:设置多张图片,放在前面的图片显示在上面

准备图片,这里back02图片比 back03 图片的大小要大的多

修改css样式:

css 复制代码

.box {
    background-color: aquamarine;
    background-image: url(./back01.png), url(./back02.png),
      url(./back03.png);
    width: 300px;
    height: 300px;
    /* 暂时不看 */
    background-repeat: no-repeat;
  }

back03 图片跑哪去了?

原因去设置多张图片的特点里找

background-repeat

要点

background-repeat 用于设置图片是否要平铺

常见的设置值有

repeat: 平铺(默认)
no-repeat:不平铺
repeat-x:只在水平方向平铺
repeat-y:只在垂直方向平铺加一张图片辅助理解

演示:只在水平方向平铺演示(其他值自行实验)

这里指使用back01 图片

修改css

css 复制代码

.box {
    background-color: aquamarine;
    background-image: url(./back01.png);
    width: 300px;
    height: 150px;
    background-repeat: repeat-x;
  }

background-size

要点

background-size 用于设置背景图片的大小,可以设置以下的几个值:

auto: 默认值,以背景图片本身大小展示
cover:缩放背景图,以完全覆盖铺满元素,可能背景图片部分看不见
contain:缩放背景图,宽度和高度铺满元素,但是图片保持宽高比
< percentage > :百分比,相对于背景区
length: 具体的大小比如 100px 100px (宽,高)

background-size 设置格式:

auto ,length ,百分比的方式可以混合使用
混合使用时,未设置的宽度或高度会使用默认值auto,即使用图片默认的宽或高
可以只设置一个值,代表宽度宽度,高度用默认值.
auto ,length ,百分比的方式,不可以与 auto,cover,contain 一起使用,这样会造成语法错误,最终会使用 backgtound-size的默认值,即auto,展示效果和auto 一样

这里选择一张大小为314162的图片,给一个400 300的div 来设置背景图

演示一:auto,(即不设置background或者设置为auto)

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        background-color: aquamarine;
        width: 400px;
        height: 300px;
        background-size: auto;
        background-image: url(./back04.png);
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

可以看到图片完全按照自己的大小来展示.

演示二:cover

css 复制代码

.box {
    background-color: aquamarine;
    width: 400px;
    height: 300px;
    background-size: cover;
    background-image: url(./back04.png);
    background-repeat: no-repeat;
  }

可以看到 cover 的效果其实是放大或缩小图片,以铺满整个元素,除非元素的宽和高与图片完全相同,否则,cover 会在宽度和高度方向上同时拉伸,即使元素宽度与图片宽度相同,也看不到完整的宽度方向的图片全景(自己实验).

演示三:contain

css 复制代码

 background-size: contain;

与cover 不同,contain 也会拉伸,但是会一直保持宽高比,即使元素大小小于图片大小 contain 也会将图片完整显示出来.

演示四: length 与百分比

css 复制代码

 background-size: 100px 50%;

length,auto,百分比以及省略方式的混用不再做演示,需要记得一点是,宽度和高值的省略会默认使用auto 属性,即采用图片本身的大小进行展示.

background-position

background-position 用于设置背景图片在水平,垂直方向上的具体位置可以设置具体的数值 比如 20px 30px 水平方向上还可以设置:left,center,right 垂直方向上还可以诶设置:top,center,bottom 如果只设置了1个方向,另一个方向默认是center

background-attachment

background-attachment 决定背景图像的位置在视口内固定,或者随着包含他的区块滚动

可以设置以下3个值: srcoll : 此关键属性值表示背景相对于元素本身固定,而不是随着它的内容滚动 local : 此关键属性值表示背景相对于元素的内容固定.如果一个元素拥有滚动属性,背景将会随着元素的内容滚动. fixed:此关键属性值表示背景相对于视口固定.即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动.

background

background 是一系列背景相关属性的简写

常用格式

background-size 可以省略,如果不省略,/background-size 必须紧跟在background-position的后面

其他属性也都可以省略,而且顺序任意

background-image 与img 的对比

总结:

img,作为网页内容的重要组成部分,比如广告图片,LOGO图片,文章配图,产品图片

background-image

可有可无,有,能让网页更加美观.
无,也不影响用户获取完整的网页内容.

css 设置背景-详解

background-image

要点:

演示一:只设置背景图片 不设置 背景图片的宽高

演示二:background-image 只是盖在背景颜色上,并不会覆盖背景颜色.

演示三:设置多张图片,放在前面的图片显示在上面

background-repeat

要点

演示:只在水平方向平铺演示(其他值自行实验)

background-size

要点

演示一:auto,(即不设置background或者设置为auto)

演示二:cover

演示三:contain

演示四: length 与 百分比

background-position

background-attachment

background

background-image 与img 的 对比

总结:

演示一:只设置背景图片不设置背景图片的宽高

演示四: length 与百分比

background-image 与img 的对比