12.背景图片

background-image

用于设置元素的背景图片：background-image: url(“ “) ;

元素没有设置宽高，背景图片不会显示。

background-repeat

元素图片的展示方式

• repeat：平铺

• no-repeat：不平铺

• repeat-x：只在水平方向平铺

• repeat-y：只在垂直平方向平铺

background-size

设置背景图片大小，图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

• auto：默认值, 以背景图本身大小显示
• cover：缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见
• contain：缩放背景图片，并保持图像的宽高比例
• percentage：百分比，相对于背景区

/* 一个值：这个值指定图片的宽度，图片的高度隐式的为 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;

background-position

设置背景图片在水平、垂直方向上的具体位置

• 可以设置具体值:

  • background-position:100px 50px;
  • background-position:0 0;

• 水平方向还可以设值：left、center、right;

• 垂直方向还可以设值：top、center、bottom;

• 如果只设置了1个方向，另一个方向默认值是center;

background缩写

background : background-color || background-image || background-repeat || background-position || background-size

background-size必须紧跟在background-position的后面,其他属性顺序任意，也可以省略。

案例：

调整浏览器窗口大小,背景图片内容也跟着伸缩background: url("xxx.png") center;

background-image和img的使用区别

• img元素用在网页内容的重要组成部分，比如：广告图片、LOGO图片、文章配图、产品图片

• background-image用在网页细节方面，让网页更美观，缺少他也不影响用户获取主要的网页内容信息。