背景图的设置

在以前版本中无法设置背景图片的尺寸

 

通过一个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;

 

 

//=============================

多背景

 

可以为同一个盒子设置多个背景

 

这是四个角↑

 

中间部分也填满了

 

//==============================