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;
将引入图片放缩,显示完整图片,可重复排列,会有多余空间。