使用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 h1 { margin-top: 0; }                               

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

 查看演示

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