css解决background图片背景与浏览器不适配的问题

background图片背景与浏览器适配问题的解决html+css

初入html的你，使用html中background属性，当background的值是图片时，有没有发现图片的大小尺寸和浏览器页面不匹配呢？
就像这样：

当背景图片尺寸大小和浏览器页面不一样时，就会像上图一样，一直填充相同的图片只到占满整个浏览器页面。
而我们想要得到的效果，如下图所示：
让图片充满整个浏览器页面，这才是我们想要的图片背景！
我们知道，html中的background属性是无法像img标签一样设置width值的，要实现图片背景与浏览器的适配，就需要css的帮助。
css中的关于background的使用，与HTML有很大不同。
如上图所示，css中的background还有众多的属性。其中，我们可以看到background-size属性，它的作用是规定背景图片的尺寸。
那么作为一个属性，它的值有哪些呢？如下图所示：

background-size的值有length、percentage、cover、contain四个值可选，其中我们可以看到，当background-size的值为cover时，就会将图像扩至足够大，完全覆盖背景区域。这样就解决了图片与浏览器不适配的问题。

你学会了吗？欢迎留言一起讨论。