非零基础自学前端最后一遍一 HTML+CSS 11 CSS设置背景 11.1 设置背景background-image

缺乏、安全感 2024-03-26 21:52 22阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  11 CSS设置背景
         *   *  11.1 设置背景background-image
             *   *  11.1.1 认识网页的背景
                 *  11.1.2 background-image

![在这里插入图片描述][d20b8db78cc64bedbab72eccfcdf52b7.png_pic_center]

#### 一 HTML+CSS ####

#### 11 CSS设置背景 ####

##### 11.1 设置背景background-image #####

###### 11.1.1 认识网页的背景 ######

*  在开发中, 为了让网页更加美观, 我们经常会设置各种各样的背景:
    
     *  我们前面已经学习了如何设置背景颜色, 这里我们要学习设置背景的更多知识;

![在这里插入图片描述][17ca330313134facb59feb42bce38d65.png_pic_center]

###### 11.1.2 background-image ######

*  background-image用于设置元素的背景图片
    
     *  会盖在(不是覆盖)background-color的上面
 *  如果设置了多张图片
    
     *  设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面
 *  注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的

<!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 {
          
          width: 600px;
          height: 600px;
          background-color: #f00;
    
          /* 设置背景图片 */
          background-image: url(../images/kobe01.jpg), url(../images/kobe02.png);
          background-repeat: no-repeat;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box"></div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][1ad80e3a3f154d0180d96e6d2cf922a7.png_pic_center]

[d20b8db78cc64bedbab72eccfcdf52b7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/72e8f0343409428c8bd73d2cbf8fca01.png
[17ca330313134facb59feb42bce38d65.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/419037006b084f58bf739b91141b83ad.png
[1ad80e3a3f154d0180d96e6d2cf922a7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/0dd9cee4ab3b49629fa952a6098fbe5a.png