先来看w3c的background-size的几个值:

 background-size:cover;    把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

 background-size:contain;  把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

在项目中经常会使用一张背景图当作网页背景,我一直使用的是 background-size:cover; cover这个值是使背景图铺满全屏,但是背景图片可能显示不完全。

后来发现 background-size:100% 100%;  可以使图片铺满全屏并且使背景图片显示完全(荡然不同屏幕下背景图片会被拉伸或缩小),这个值相对于cover来说,更适合用来设置全屏背景,尤其是自适应宽高的网页中。

还有个 background-size:contain;  这个就是把背景图等比例缩放,尽量适应屏幕。

相关文章:

  • 2022-12-23
  • 2021-08-03
  • 2022-12-23
  • 2021-09-15
  • 2021-11-17
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-10-15
  • 2021-11-27
  • 2021-05-13
  • 2021-08-12
  • 2022-01-04
相关资源
相似解决方案