CSS background-repeat

谁借莪１个温暖的怀抱￠ 2024-05-24 04:14 28阅读 0赞

## `background-repeat` ##

> 定义背景图像的重复方式, 背景图像可以沿着水平或者垂直方向重复, 或者根本不重复. 默认是 `repeat`, 这个单值表示水平和垂直方向都重复.

### 语法 ###

#### 关键词 ####

1.  `repeat`
    
     *  图像会尽可能地重复至覆盖整个背景图像绘制的区域, 最后一张的图像如果大小不合适会被裁剪
     *      <div class="box">repeat<br>repeat</div>
     *      .box {
                    
              width: 200px;
              height: 200px;
              background-image: url(../../float/star.png);
              border: 15px dashed salmon;
              padding: 1rem;
              font-size: 2em;
              text-align: center;
              color: #111;
            }
     *  ![请添加图片描述][36c1bcddcbe64d2db8a12d8b83544c07.png]
2.  `space`
    
     *  图像会在不被裁剪的情况下尽可能重复. 第一个和最后一个图像会被固定在元素相应的边上, 空白会均匀分布在图像之间.
     *  只有在图像太大但是容器太小没有办法完整展示一个图像时, 图像才会被裁剪.
     *      <div class="box box1">space<br>space</div>
            <div class="box box2">space<br>space</div>
            <div class="box box3">space<br>space</div>
     *      .box1 {
                    
              background-repeat: space;
            }
            .box2 {
                    
              background-repeat: space;
              background-image: url(../../float/coffee-whole.png);
            }
            .box3 {
                    
              background-repeat: space;
              background-image: url(../../float/star.png);
              background-position: bottom right;;
            }
     *  ![请添加图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAKO-_o2_vv6MpIC4geiBaWg_size_20_color_FFFFFF_t_70_g_se_x_16]
        
         *  第一张图是 `space` 的默认表现;
         *  第二图的大小是 `310 * 232` 超过了盒子的 `padding-box` 的 `232 * 232` 大小, 所以图像发生裁剪;
3.  `round`
    
     *  当允许的空间在增大, 重复的图片将会被拉伸(不留空隙)直到有足够的空间(大于等于半个图像宽度)添加另一张图像. 当新的图像加入后, 所有当前图像都被压缩.
     *      <div id="space" class="box box4">round<br>round</div>
            <button id="add">+10</button>
     *      .box4 {
                    
              width: 201px;
              height: 201px;
              background-repeat: round;
              padding: 0;
              border: 0;
              outline: 1px solid #111;
            }
     *      let myWidth = 201;
            add.addEventListener('click', (e) => {
                    
              myWidth += 10;
              space.style.width = `${
                      myWidth}px`;
            })
     *  ![请添加图片描述][e3d84b440f14495883c8c6e6bacc39ec.gif]
     *  ?我们看着这个案例来理解上面的意思, 首先单个背景图的大小是 `67*67`, 背景是 `201*201`, 刚刚好容纳三个背景图, 当每次点击按钮使得背景增加 `10px` 时, 根据上面的说法, 背景图会被拉伸, 这样就不会留下空隙.
     *  当第四次点击按钮后, 背景宽度增加了 `40px`, 大于半个图像的宽度 `33.5px (67/2)`, 所以整个背景从 `3` 个图像变为 `4` 个图像, 并且所有的四个图像都被压缩, 视觉上`变窄`
4.  `no-repeat`
    
     *  背景图不会重复, 因此整个背景区域Kennedy没有完全被覆盖. 背景图像的位置有 `background-position` 决定
     *      <div class="box box5">left <br> top</div>
            <div class="box box6">center <br> center</div>
            <div class="box box7">left <br> top</div>
     *      .box {
                    
              background-repeat: no-repeat;
            }
            .box5 {
                    
              background-position: left top;
            }
            .box6 {
                    
              background-position: center;
            }
            .box7 {
                    
              background-position: bottom right;
            }
     *  ![请添加图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAKO-_o2_vv6MpIC4geiBaWg_size_19_color_FFFFFF_t_70_g_se_x_16]
5.  `repeat-x` 和 `repeat-y` 只是 `repeat` 在不同方向上的表现, 就不重复演示了.

### 语法 ###

1.  双值语法
    
     *  双值语法中, 第一个值表示背景图像在 `x` 轴上的重复行为, 第二个值表示背景图像在 `y` 轴上的重复行为.
2.  单值语法
    
    <table> 
     <thead> 
      <tr> 
       <th>单值</th> 
       <th>等价的双值语法</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>repeat-x</td> 
       <td>repeat no-repeat</td> 
      </tr> 
      <tr> 
       <td>repeat-y</td> 
       <td>no-repeat repeat</td> 
      </tr> 
      <tr> 
       <td>repeat</td> 
       <td>repeat repeat</td> 
      </tr> 
      <tr> 
       <td>space</td> 
       <td>space space</td> 
      </tr> 
      <tr> 
       <td>round</td> 
       <td>round round</td> 
      </tr> 
      <tr> 
       <td>no-repeat</td> 
       <td>no-repeat no-repeat</td> 
      </tr> 
     </tbody> 
    </table>

[36c1bcddcbe64d2db8a12d8b83544c07.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/6516ec64148146c7971821f45f22caa2.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAKO-_o2_vv6MpIC4geiBaWg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/f6b00248f1b44e9b8695c1803ea42da0.png
[e3d84b440f14495883c8c6e6bacc39ec.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/c803b55413684aa695586106984195d3.gif
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAKO-_o2_vv6MpIC4geiBaWg_size_19_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/98a3b3b7322545b5b0b33f3cf6877928.png