http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201501221251.html
现在使用大幅图片作为网页背景已经成为某些网站设计的趋势。使用CSS来动态改变背景图片的大小是非常容易的事情。我们可以通过CSS3的一个属性background-size来完成这项工作。
现在使用大幅图片作为网页背景已经成为某些网站设计的趋势。如果你要设计这种风格的网站，你需要注意以下几点：
- 一张全屏、高质量的图片的大小是非常大的。这会照成加载网页速度变慢，你需要权衡利弊。
- 在使用背景图片之前你需要研究以下平均屏幕分辨率的问题。最好的方法是使用一些分析软件去查看已经存在的网站，例如：Google Analytics。另外，你还可以在这里查看一下总体趋势。就目前来说，建议使用1024 × 768 或 1200 × 800的尺寸。
- 别忘了移动手机设备。你可以使用
@media query来为移动设备设置320 × 480的背景图片。 - 使用高质量的图片缩小要比低质量的图片放大效果要好得多。如果你准备在所有的设备上都使用同一张背景图片，那么建议使用一张高质量的图片来做背景图片。
- 通常情况下，不要使用CSS来改变背景图片的宽高比，也就是说，不要为了填充整个屏幕而改变图片的比例。你需要在空白部分使用
background-color来填充某些颜色。 - 记住这样一条规则：你所选择的图片的内容一定要清晰可见。
记住上面这些注意事项，使用CSS来动态改变背景图片的大小是非常容易的事情。我们可以通过 CSS3 的一个属性background-size来完成这项工作。
当你在页面上使用 background-size 的时候可以有一些选择：设置值为 cover 可以动态缩放图片，使图片总是占据屏幕的最大宽度和高度。background-size:cover属性的一个缺点是老的浏览器不支持它。在老的浏览器上需要一个替代方案，可以设置背景图片宽度为100%。
另外，你可以使用background-size:contain来设置背景图片。该属性优先照顾图像，它会将图片完全显示。
选择以上的哪种方案来制作背景图像，你需要仔细考虑。不管选择哪一种，你都需要为背景设置一个background-color来作为背景色填充某些空白区域。这也是在图片加载失败时的一种回退方法。
下面是一个小例子，html代码如下：
<div id="stmark"> <h1>background-size-demo</h1> <p>background-size属性的使用_jQuery之家-自由分享jQuery、html5、css3的插件库。</p></div> |
CSS样式如下（没有添加浏览器厂商的前缀）：
body, html { min-height: 100%; }body { color: white; background: url(st-marks-square.jpg) center no-repeat; background-size: cover; background-color: #444;}div#stmark { width: 40%;background: rgba(0,0,0,0.6);border: 5px double white; margin: 3em;padding: 2em 2em 0 2em; float: right;line-height: 155%;font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei";}div#stmark h1 { margin-top: 0; } |
得到的结果是图片位于网页元素之下，并占据整个屏幕，你可以缩放浏览器来查看一下效果。关于background-size的用法，你还可以参考这篇文章：使用一行CSS代码生成全屏背景图像 。
本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201501221251.html