使用CSS3制作响应式网页背景图像

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 h 1 { margin-top : 0 ; }

得到的结果是图片位于网页元素之下，并占据整个屏幕，你可以缩放浏览器来查看一下效果。关于background-size的用法，你还可以参考这篇文章：使用一行CSS代码生成全屏背景图像 。

 查看演示

本文版权属于jQuery之家，转载请注明出处： http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201501221251.html

转载于:https://www.cnblogs.com/zhangjingyun/p/5110285.html