如何实现网页背景图片自适应全屏？

如果问是什么让所有男人都生活在恐惧中，回答是不确定。没有人表露，但好奇会害死猫。十个女人中会有九个同意这点。广告商想尽办法让我们觉得不足够，但会告诉我们还可以改进。没错，先生们….size很重要。

我说的是background-size。CSS里的background-size属性能够让程序员决定如何在指定的元素里展示。MooTools程序员Christoph Pojer在他的网站上运用了background-size技术，使得在浏览器上他的头像始终“全面覆盖”在页头上——甚至是在手机上。下面让我们来看看神奇的background-size属性是如何使用的。

background-size CSS属性

这个background-size属性有几个预定义的值，但也可以像其它size属性一样使用数字：

• contain: 包含，整个背景图都要被包含在元素内，没有超出的部分。
• cover: 覆盖，背景要覆盖元素的所有区域，不能有空白出现。
• 长度/百分比: 数字值

/* base header classes */
#header {
	/* header dimension! */
	height: 350px; /* additional background properties */ background-repeat: no-repeat; background-position: center center; /* some box shadow for good fun */ -webkit-box-shadow: rgba(0,0,0,0.20) 0 10px 10px; -moz-box-shadow: rgba(0,0,0,0.20) 0 10px 10px; box-shadow: rgba(0,0,0,0.20) 0 10px 10px; } /* 覆盖 cover */ #header.flex { /* size matters */ -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } /* 包含 contain */ #header.flex { /* size matters */ -webkit-background-size: contain; -moz-background-size: contain; background-size: contain; } /* flex, fun */ #header.flex { /* size matters */ -webkit-background-size: 100% auto; -moz-background-size: 100% auto; background-size: 100% auto; }
Christoph在其网站上使用了最后一个例子。想看看各种值下的效果，请看看下面的演示，它是用JavaScript做成的，可以有交互动作：

观看演示

w3cschool案例如下：

规定背景图像的尺寸：
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

亲自试一试 

浏览器支持

亲自试一试 - 实例IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。

拉伸背景图像

拉伸背景图像来完全覆盖内容区域。

拉伸背景图像，对背景图像水平复制四次

对背景图像进行拉伸，以使背景图像恰好水平复制四次。

background-size神奇之处就在于它的自我调整能力。我以前常常担心当浏览器窗口发生变化，当有resize事件发生时，页面会出现不可预测的变化。但 background-size却能根据客户端浏览器的大小自我的调整适应。 background-size在火狐浏览器, Safari浏览器, 谷歌浏览器, Opera, 和 IE9+ 中都受支持。

你觉得这种技术有价值吗？会使用在你的页面上吗？

转载于:https://www.cnblogs.com/ibingbing/p/5833319.html