CSS之背景的设置 (六)：background-(image、repeat、size、position、attachment)、background、background-image和img对比

跳转目录🚀

篇章	知识点
CSS之邂逅(一)	认识CSS、编写CSS样式、CSS注释、常见的CSS属性
CSS额外知识补充(二)	link元素、计算机进制、CSS表示颜色、Chorme调试工具、浏览器渲染流程
CSS属性与选择器(三)	CSS文本属性、CSS字体属性、CSS常见选择器
CSS属性的特性(四)	CSS属性的继承、CSS属性的层叠、CSS属性的类型、display属性、元素的隐藏、overflow属性、CSS不生效技巧
CSS盒子模型(五)	认识盒子模型、内容width/height、内边距padding、边框/圆角border、外边距margin、盒子和文字阴影、box-sizing
CSS设置背景(六)	background-(image、repeat、size、position、attachment)、background、background-image和img对比
CSS高级元素的使用(七)	列表元素、表格元素、表格合并、表单元素、表单常见属性
CSS之Emme语法t和结构伪类(八)	认识Emmet、常见Emmet语法、常见的结构伪类、否定伪类的使用
CSS额外知识补充(九)	border图形、Web网络字体、Web字体图标、CSS精灵图、cursor属性
CSS元素定位(十)	标准流布局、认识元素的定位、静态定位、相对定位、固定定位、绝对定位、粘性定位、z-index
CSS元素浮动(十一)	认识浮动、浮动的规则、浮动的案例、高度塌陷、清除浮动、布局方案对比
CSS flex布局(十二)	认识flex布局、flex布局的理解、flex-container属性、flex-item属性

1. background-image

作用： 用于设置元素的背景图片
注意点：

• 同时设置background-color和background-image，后者层级较高，会覆盖在前者之上。
• 可以设置多个背景图片，第一张的层级最高。
• 背景图片的显示跟其元素相关，如果元素没有宽高则无法显示。

案例演示(只展示一下css)：

.box {
      width: 500px;
      height: 500px;
      background-color: #0f0;
      /* 设置背景图片 */
      background-image: url(./img/kobe01.jpg), url(./img/kobe02.png);
      background-repeat: no-repeat;
    }

2. background-repeat

作用： 用于设置元素的背景图片平铺效果

常见的值：

• (默认值)repeat ：平铺
• no-repeat：不平铺
• repeat-x：只在水平方向平铺
• repeat-y：只在垂直方向平铺

案例演示：
在设置背景图片时也有不平铺演示，一般设置背景可以利用小图片的平铺效果来完成，如下面墙的效果

.box {
      width: 600px;
      height: 600px;
      background-color: #f00;

      /* 设置背景图片 */
      background-image: url(./img/wall.png);
      /* 设置背景平铺效果 */
      
    }

3. background-size

作用： 用于设置背景图片的尺寸

常见的值

• auto：默认值，背景图片以本身大小来展示
• contain：缩放背景图，保持图片宽高比的情况下，等比例缩放至宽度或高度铺满元素
• cover：缩放背景图，缩放至宽度和高度都铺满元素，可能会导致图片部分看不见
• < percentage >：百分比，相对于背景区
• length：具体大小，直接设置背景图片的尺寸，比如100px 100px

案例演示：

.box {
      width: 600px;
      height: 600px;
      background-color: #f00;

      background-image: url(./img/kobe01.jpg);
      background-repeat: no-repeat;
      background-size: 300px 200px;

    }

4. background-position

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

常用的值：

• 具体的值：20px 30px来设置水平和垂直方向的位置
• 水平方向关键字：left center right
• 垂直方向关键字：top center bottom
• 如果只设置了1个方向，另外一个方向的默认值为center

案例演示：

.box {
      height: 489px;
      background-image: url(./img/mhxy.jpg);
      background-position: center;
    }

让背景图的显示中心随着窗口缩放，用于属于居中位置，显示重要的核心信息

5. background-attachment

作用： 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动

可以设置以下3个值：

• scroll：背景相对于元素本身固定，不随内容滚动而滚动。
• local：背景相对于元素的内容固定，如果元素拥有滚动机制，那么背景随着内容滚动而滚动。
• fixed：背景相对于视口固定。即便元素拥有滚动机制，背景也不会随着元素内容滚动。

fixed案例演示：
即页面滚动后视口改变，背景随着视口而固定。

6. background

作用： 是一系列背景相关属性的简写属性。

书写格式：

• background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面
• 其他属性也都可以省略，而且顺序任意
  

7. background-image和img对比

利用background-image和img都能够实现显示图片的需求，在开发中该如何选择？

• img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片
• background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息