css设置背景图片问题?

background-size的值contain,cover,100% 100%
这三个值有啥区别?

阅读 1.3k
1 个回答

contain:自动将背景图像填满元素的其中一边,图像的比例保持不变。(也就是说,图像多大,元素则等比例缩放填充图像。)

cover:在保持图像原始比例的情况下,将元素的背景区域完全覆盖,超出元素宽高的部分会自动被裁剪,是一种比较“智能”的背景图片大小设置方式,通过配合“background-position”属性使用可以将开发者认为背景图像中“更重要”的部分通过定位显示出来。等价于100%或100%,100%。

百分比值:用“百分比”作为值,结构和用“像素值”一致,也是两个值,第一个值是相对于元素宽度的百分比值,第二个值是相对于元素高度的百分比。如:“100% 80%”、“100% auto”或“auto 50%”。

像素值:可以通过像素“px”精确地设置背景图片的大小。需要设置为两个值,第一个值表示背景图的宽度,第二个值表示背景图的高度,还可以通过设置宽度或高度的其中一个,将另外一个值设置成“auto”达到保持背景图原始图像比例的效果。如:“240px 120px”、“180px auto”或“auto”(等价于auto auto相当于还原默认的大小)”。

参考demo

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题