background-size属性解释

background-size的几种写法

1.background-size: px px;

2.background-size: % %;

3.background-size:auto auto;

4.background-size:cover;

5.background-size:contain;

解释：

1.第一种写法

background-size: 100px  100px;若所引图片如下：

假设父容器为1000px*100px的矩形，那么将截取所引图片的100px*100px的大小来显示，如下图：

2.第二种写法

background-size:100% 100%;   (百分比可以调节）

background-size:水平方向 垂直方向；

该百分比是指的所引图片占父容器的百分比，所以第一个100%指的是所引图片宽度占屏幕100%

第二个指的是所引的图片占屏幕100%

例如：

• 若父容器为2000px*1000px的容器，所引图片为1000px*1000px，background-size:100% 100%则所引图片显示如图：

• 若写为background-size:50% 50%;

3.第三种写法

backgroung-size:100% auto;

若将高度改为自动（auto），则宽度会占满屏，高度自动适用

例：若父容器为1000px*500px，所引图片为1000px*1000px,则显示图片如下（虚线内不显示）

若父容器·为2000px*500px，所引图片为1000px*1000px，则显示图片如下（虚线内不显示）

如图，高度有所损失，只显示了是上半部分。然而，宽度因为父容器的高度等比放缩，从而适应屏幕，而此时高度损失有所变化。

若宽度为自动（auto），则高度会占满屏，宽度自动适用。

4.第四种写法

background-size:cover;

将引入图片放缩，来适用父容器（取决于父容器的width与height哪个大)，铺满整个父容器，裁掉多余部分。

例：若父容器为2000px*1000px，所引图片为1000px*1000px，则显示如下图：

5.第五种写法

background-size:contain;

将引入图片放缩，显示完整图片，可重复排列，会有多余空间。