css将图片设置为背景（CSS把图片设置为背景）

前言

先列出几种常用的搭配             ，方便 CV 
  
 
  
 
  
 
  
 
  
 
  
 
 ，想了解具体的可以看后面详细介绍

第 1 组：刚好填充整个背景区域













，不重复

background-image: url("~@/路径"); background-size: cover; background-repeat: no-repeat;

第 2 组：从左上角开始 
  
  
  
  
  
  ，垂直水平重复填充

background-image: url("~@/路径"); background-size: 30px auto; // 宽度 30px  
  
  
  
  
  
  
 ，高度自适应

一             、图片路径：background-image

引入图片

 


 


 


 


 


 


，注意路径前面需要加 ~ 符

background-image: url("~@/路径");

二 
  
 
  
 
  
 
  
 
  
 
  
 
 、图片大小：background-size

指定背景图片的大小 
 
 
 
 
 
 ，可以设置具体数值













、百分比 
  
  
  
  
  
  、cover 
  
  
  
  
  
  
 、contain

具体数值：指定宽高 百分比：按图片自身大小的百分比显示 
   
   
   
   
   
   
 ，100% 表示原图大小 cover：宽高比不变
 

 

 

 

 

 

，图片缩放为刚好覆盖背景区域的最小大小 contain：宽高比不变
 

 

 

 

 

 

 ，图片缩放为适合背景区域的最大大小 background-size: 100px 100px; // 可以只设置一个数值             ，未设置的值默认为 auto background-size: 100% 100%; // 可以只设置一个数值 

 
 

 
 

 
 

 
 

 
 

 
 

，未设置的值默认为 auto background-size: cover; background-size: contain;

三

 


 


 


 


 


 


、是否重复：background-repeat

当图片宽高小于背景时












，如何设置重复情况                    ，默认 x轴 
 
 
 
 
 
 、y轴都重复

repeat：默认值 
 
 
 
 
 
 
 
 
 
 
 
 
，x轴 
   
   
   
   
   
   
 、y轴都重复 repeat-x：仅x轴重复 repeat-y：仅y轴重复 no-repeat：不重复 inherit：继承父元素的属性设置 background-repeat: repeat; // 默认值



















，垂直水平都重复 background-repeat: repeat-x; // 水平方向重复 background-repeat: repeat-y; // 垂直方向重复 background-repeat: no-repeat; // 不重复 background-repeat: inherit; // 继承父元素

四
 

 

 

 

 

 

、起始位置：background-position

设置背景图片的起始位置             ，默认值为 0%
 

 

 

 

 

 

 、0% 
  
 
  
 
  
 
  
 
  
 
  
 
 ，即左上角

关键字：left top             、left center 

 
 

 
 

 
 

 
 

 
 

 
 

、left bottom












、right top                    、right center 
 
 
 
 
 
 
 
 
 
 
 
 
、right bottom



















、center top             、center center 
  
 
  
 
  
 
  
 
  
 
  
 
 、center bottom













，这个太简单了 
  
  
  
  
  
  ，就不一一描述了 
  
  
  
  
  
  
 ，只需要注意一点

 


 


 


 


 


 


，如果只写了一个关键字 
 
 
 
 
 
 ，另一个默认为 center x% y%：指定百分比 
   
   
   
   
   
   
 ，左上角为0%













、0%
 

 

 

 

 

 

，右下角为100% 
  
  
  
  
  
  、100% xpos ypos：指定像素
 

 

 

 

 

 

 ，左上角为0px 
  
  
  
  
  
  
 、0px             ，如果只写了一个 

 
 

 
 

 
 

 
 

 
 

 
 

，另一个默认为 50% inherit：继承父元素的属性设置 background-position: center center; background-position: 50% 50%; background-position: 0px 0px;

五

 


 


 


 


 


 


、能否滚动：background-attachment

背景图片是否可以跟随页面滚动












，默认值为 scroll                    ，可以滚动

scroll：默认值 
 
 
 
 
 
 
 
 
 
 
 
 
，背景图片随着页面滚动 fixed：背景图片不会随着页面滚动 local：背景图片会随着元素内容滚动 inherit：继承父元素的属性设置 background-attachment: scroll; // 随页面滚动 background-attachment: fixed; // 不滚动 background-attachment: local; // 随内容滚动

结束

其实还有其它属性



















，但是使用频率没那么高             ，就不一一介绍了 
  
 
  
 
  
 
  
 
  
 
  
 
 ，想了解的可以去 菜鸟教程 查看