当前位置主页 > 资料库 > 前端教程 > 浅谈CSS背景图片background-image

浅谈CSS背景图片background-image

2015-01-31

我们可以通过CSS来在任何HTML元素中放置背景图片。这主要是通过CSS background-image属性来完成的。

body { background-image: url("images/gradient.gif"); }                                
                            

我们不能够使用 src 属性来制作背景图片,这是一个HTML标签<img>的属性,而不是CSS属性。同样我们也不能使用href属性或link标签。通过使用background-image属性,在url中指定图片的位置,可以直接将图片插入到页面中,制作成背景图片。

我们这里强调的是background-image实现可以使用在任何元素中,<body>元素是常被用于制作背景图片的元素,我们下面的例子也是以<body>元素来举例。

用于背景图片的图片最好用PhotoShop之类的图像软件处理好,尽量减少图片的尺寸,并使图片在重复时能做到无缝集成。

默认情况下,背景图片将在元素的水平和垂直方向上不断重复,如果不想图片重复,可以通过background-repeat属性来禁止它。

body { background-image: url("images/gradient.gif"); background-repeat: no-repeat; }                                
                            

background-repeat属性还可以设置为repeat-x(水平方向上重复)和repeat-y(垂直方向上重复)。

你还可以改变背景图片的参考位置(background-position)来获取背景图片,注意:背景图片的参考原点总是在图片的左上角。

background-position: 20em 10px;                                
                            

background-position的属性值总是先写水平方向在写垂直方向,中间使用空格隔开,除非是你使用默认关键字center。在上面的例子中,background-image将离页面的左边20em,里页面的上边10px。这里可以使用任何的CSS单位。也可以像上面那样混合使用。并且还可以是负值。

background-position可以使用预定义的关键字:topcenterbottomleftrightbackground-position的默认值是左上角。如果你希望背景图片位于元素的中间,你可以改变position的设置:

background-position: center;                                
                            

关于Body高度的问题

当你使用background-position: center;来为<body>制作背景图片时,如果页面上的内容比较少,你会发现背景图片不在浏览器窗口的正中间。那是因为Firefox浏览器和其他兼容浏览器是从页面内容获取页面的垂直高度,而不是从浏览器的高度获取。为解决这一问题,可以单独为它提供一个样式声明:

html, body { height: 100%; }                                
                            

默认情况下,背景图片会随着页面上下滚动而变化,如果你希望背景图片固定不动,可以使用background-attachment上下来fixed它。

background-image上下项background-color属性一样,可以使用简写方式:background。但是建议不要简写,这样使CSS文件看起来会更加清晰。

CSS3中为背景图片添加了很多新的属性,包括多重背景图片和动态改变背景图片的尺寸

Previous:
上一篇:使用CSS3制作机器人总动员的Eva
Next:
下一篇:CSS 3D transforms系列教程-Perspective
返回顶部