设置背景图片后,使用backgroup-size出现的问题

相同点:

background-size中,100%和cover都是用于将图片扩大或者缩放来适应整个容器

不同点:

background-size:100% 100%;---按容器比例撑满,图片变形;

background-size:cover;---把背景图片放大到适合元素容器的尺寸,图片比例不变,但是要注意,超出容器的部分可能会裁掉。

第一种效果你一定会看到完整的背景图片,但是有可能被挤压(失去图片原来的比例)

第二种效果你不一定能看到完整的图片,但是图片的比例没有发生变化。

 

 

 

 

感谢Casanover的原创background-size中,100%和cover的区别

 

posted @ 2020-12-12 10:32  打工人001  阅读(302)  评论(0编辑  收藏  举报