当前位置主页 > 资料库 > 前端教程 > 使用CSS3制作响应式网页背景图像

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

2015-01-22

查看演示

现在使用大幅图片作为网页背景已经成为某些网站设计的趋势。如果你要设计这种风格的网站,你需要注意以下几点:

  • 一张全屏、高质量的图片的大小是非常大的。这会照成加载网页速度变慢,你需要权衡利弊。
  • 在使用背景图片之前你需要研究以下平均屏幕分辨率的问题。最好的方法是使用一些分析软件去查看已经存在的网站,例如: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代码生成全屏背景图像

查看演示

Previous:
上一篇:12行js代码编写一个炫酷的html5 lightbox效果
Next:
下一篇:使用CSS渲染图片样式的提示和建议
返回顶部