背景图的设置

在以前版本中无法设置背景图片的尺寸
 
通过一个background-size:100 px 100px ;这样就可以设置。
 
但是当图片和盒子宽高比不一致时就会压缩比例。
 
实现背景图永远都能铺满整个盒子,并且背景图片不被拉伸或者压缩就用这个属性。
始终让背景铺满盒子↓
background-size:cover
铺满盒子,不会拉伸压缩图片。(不会给盒子留空白)
当动态的调整盒子大小时,宽度或者高度始终由一个方向是铺满整个盒子的,并且另外一个方向同比例调整。
能不能让背景图片始终完整显示在盒子中
 
background-size:contain;
让背景图完整显示在盒子里面↑(会留白),宽高自动调整。
 
background-size:100% 100%;
尺寸还可以设置为百分比,参考的尺寸是盒子自身。
//====================
背景默认是从边框开始的
 
 
//-=======================
background-origin
默认情况下
 
当bgcpopsition时,他将不受padding的影响,挨着边框显示。
 
当是这个属性时,他在边框的下面。
 
 
 
下面这个是在内容里面显示的,不会受padding和border的影响
 
//=================================
 
裁剪
background-clip可以改变背景区域的位置
 
background-clip:border-box;
背景默认是从背景开始的
 
背景是从padding开始的
background-clip:padding-box;
背景是从内容开始
background-clip:content-box;
 
 
//=============================
多背景
 
可以为同一个盒子设置多个背景
 
这是四个角↑
 
中间部分也填满了
 
//==============================
原文地址:https://www.cnblogs.com/wb336035888/p/6944662.html