响应式设计在现代网页设计中越发重要，但在实际开发中，响应式设计也带来了一些问题。其中之一就是背景图片适应性不足。本文将介绍如何解决响应式设计中的背景图片问题。
背景图片的适应性
背景图片适应性不足分为两种情况：1）图片不足以填满背景；2）图片过大，导致页面加载速度较慢。以下将分别讨论这两种情况的解决方案。
图片不足以填满背景
当一个背景图片应用于不同的设备上，由于屏幕尺寸和分辨率的差异，背景图片可能无法填满整个屏幕。这时候我们可以使用CSS的background-size属性来解决这个问题。
使用background-size属性，可以设置图片的大小为“cover”或“contain”，如下所示：
----------- -
----------------- --------------
------------------ ----------
-------------------- -------
---------------- ------ -- -- ------- --
-使用“cover”属性，背景图片将被放大或缩小以使其完全覆盖整个背景区域。而使用“contain”属性，则会将背景图片缩放以适应整个背景区域。
图片过大
当一个背景图片太大时，可能会导致页面加载缓慢，甚至被浏览器忽略掉。这时候我们可以使用CSS3的background-size属性中的“background-size: cover/auto”来解决这个问题。
使用“background-size: cover/auto”可以根据不同的设备加载适当大小的背景图片，并取代原先的背景图片。以优化页面加载速度。如下所示：
----------- -
----------------- --------------
------------------ ----------
-------------------- -------
---------------- ------
-
------ ------ --- ----------- ------ -
----------- -
----------------- ---------------------
---------------- -----
-
-在上述代码中，使用css3的@media screen接收不同设备宽度，然后在样式中重新声明了带有不同背景图的cover和auto
在@media screen中断点，background-size设置为auto，就能把背景图缩小。这样使你的网站的响应性更好，而且能提高页面加载速度，同时避免了使用JavaScript来实现这些效果。
结论
实现响应式设计时，背景图片适应性的问题是必须要考虑到的。通过熟练掌握CSS的background-size属性以及CSS3中的@media screen，我们可以轻松解决这个问题，同时提高页面的优化和加载速度。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6710bbdbad1e889fe2fbbc3c