非零基础自学前端最后一遍一 HTML+CSS 11 CSS设置背景 11.2 设置背景-repeat、size、position

红太狼 2024-03-26 21:52 44阅读 0赞

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

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

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  11 CSS设置背景
         *   *  11.2 设置背景-repeat、size、position
             *   *  11.2.1 background-repeat
                 *  11.2.2 background-size
                 *  11.2.3 background-position

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

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

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

##### 11.2 设置背景-repeat、size、position #####

###### 11.2.1 background-repeat ######

*  background-repeat用于设置背景图片是否要平铺
 *  常见的设值有
    
     *  repeat：平铺
     *  no-repeat：不平铺
     *  repeat-x：只在水平方向平铺
     *  repeat-y：只在垂直平方向平铺

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

<!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);
          background-repeat: no-repeat;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box"></div>
    
    </body>
    
    </html>

渲染效果

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

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

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

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

###### 11.2.2 background-size ######

*  background-size用于设置背景图片的大小
    
     *  auto：默认值, 以背景图本身大小显示
     *  cover：缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见
     *  contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
     *  <percentage>：百分比，相对于背景区（background positioning area）
     *  length：具体的大小，比如100px

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

<!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);
          background-repeat: no-repeat;
    
          /* 设置背景的尺寸 */
          /* background-size: 100% 100%; */
          /* background-size: 100px 100px; */
          background-size: 100px auto;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box"></div>
    
    </body>
    
    </html>

渲染效果

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

###### 11.2.3 background-position ######

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

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

<!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);
          background-repeat: no-repeat;
    
          /* 背景位置 */
          /* background-position: -100px -100px; */
          background-position: top;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box"></div>
    
    </body>
    
    </html>

渲染效果

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

[336b5a97ed4f4bceb942456e03063cd3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/b78c257d40224a0b98b5cf76feabe463.png
[2f01c1a73ea848adaea33ca1ae623ae9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/7bec48589e154d64bade1c868d31f446.png
[070777c491b34bb883ae95de347ef7db.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/df183219ff1b4bcc9b9aa8668579d4b0.png
[21f26460700c4e5c94fa76d6d6e9e412.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/00e14590fdbe4b12b83f7559d127dea8.png
[6d1567f7db06470fbfb5564742e9b9c3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/88c3ac7300ad42aa9a4f35eed3547162.png
[32288e75d53e417f8f7ddc83c1a4b5e5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/30265013d8c54ea1a04ffc9da0c83635.png
[bc5713e937ed43f4bc17e7507d2efd4d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/1c8113ee17c74174be45d7bc75c0d104.png
[b5106a388c5944848109e48cc1e012cf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/41bb6068980a49b2b7b7d58c087e5b7a.png
[bcf8f38afcd24f67a6fdb860fe8b97d8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/45ce68f881344fdeaa6d88b6610b937f.png
[e85e92aa731e47d4980781b83f430e9d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/a5173b2bbb32406ea899a34990243a40.png