CSS背景图怎么设置自动填充满整个元素的三种方法
CSS背景图自动填充满元素的三种方法
CSS中元素的背景图像要填充满整个元素，可以使用background-size属性来设置，该属性值可以用来设置背景图充满整个元素，分别是contain、cover，以及将width和height设置为100%。这三者的区别将通过三个实例来介绍。
使用contain充满元素的方法
该方法下，如果背景图的大小比元素小，那么背景图将会保持宽度和高度的比例，然后以重复的方式铺满整个元素，比如下方这个实例代码在线运行后的效果：
<div id='e1'></div>
<style>
#e1{width:100%;height:100%;background-image:url("../../static/img/bmi.jpg");background-size:contain;}
</style>cover方法
使用cover来设置背景图自动填充满整个元素的情况下，如果背景图比元素小，则背景图会等比例放大，直至充满整个元素，超出的地方将会被隐藏，比如下方的这个实例代码所显示的效果???算了，为了网页内容不必有过多重复的内容，大家可以在上面的实例中，将contain修改成cover，然后运行看看效果即可。
width和height的方法
background-size的属性值可以使用两个百分比来表示，比如background-size:100% 100%；其中第一个100%表示将宽度设置为元素的宽度，第二个则表示设置为元素的高度。该方法不会等比例放大或缩放背景图。关于实例，大家还是可以使用上面的那个实例，将contain修改成两个100%，中间使用空格隔开，然后运行看看效果。
免责声明：内容仅供参考，不保证正确性！