http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201501221251.html
现在使用大幅图片作为网页背景已经成为某些网站设计的趋势。如果你要设计这种风格的网站,你需要注意以下几点:
- 一张全屏、高质量的图片的大小是非常大的。这会照成加载网页速度变慢,你需要权衡利弊。
- 在使用背景图片之前你需要研究以下平均屏幕分辨率的问题。最好的方法是使用一些分析软件去查看已经存在的网站,例如: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代码生成全屏背景图像 。