css 背景图片自适应属性整理

电玩女神 2021-12-23 04:21 440阅读 0赞

本篇博客主要记录一些使用 `css` 对背景图片自适应的操作整合

### 背景图片取消重复 ###

background-image: url(image.jpg);
    background-repeat:no-repeat;

修改前  
![背景图片取消重复][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70]  
修改后  
![背景图片取消重复][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70 1]

### 背景图片固定（不会随着内容滚动而改变位置） ###

background-image: url(image.jpg);
    background-attachment:fixed;

### 背景图片居中显示 ###

垂直水平居中

background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-position:center center;

![背景图片居中显示][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70 2]  
水平方向居中 垂直方向向上

background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-position:center top;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70_pic_center]  
水平方向向右 垂直方向向下

background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-position:right bottom;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70_pic_center 1]

### 背景图片等比例拉伸 ###

background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-size: auto 100%;
    /* background-size: 100% auto; */

![背景图片等比例拉伸][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70 3]  
或根据高度进行拉伸  
![背景图片等比例拉伸][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70 4]  
还可以使用 `cover` 自动等比例拉伸图片

background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-size: cover;

![背景图片等比例拉伸][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70 5]

### 背景图片拉伸（会扭曲图片） ###

background-image: url(image.jpg);
    background-repeat:no-repeat;
    background-size: 100% 100%;

![背景图片拉伸（会扭曲图片）][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70 6]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70]: /images/20211223/ab56bef0a41744768e0438751a4de27e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70 1]: /images/20211223/5484376276664c4c99b5e5814281a602.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70 2]: /images/20211223/5639e70508ce437fbe5242cf6351d7c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70_pic_center]: /images/20211223/0d1b0a8a708a4515bf730e60afcbfa74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20211223/e15410fbafcc4847ae9ca6bbebfa5b5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70 3]: /images/20211223/4f23af400a504e938ba979832fe02f3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70 4]: /images/20211223/361315e0a6944b68aabf783eb4883a3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70 5]: /images/20211223/0cee548b01bc4d539d7d2e97d01392e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70 6]: /images/20211223/811e457cbcd54bcca6122d0eacc3006b.png