书山有径勤为路>>>>>>>>

<<<<<<<<学海无涯苦作舟!

CSS设置背景——图片背景

<1>.默认设置下的背景图片

 1 <html>
2
<head>
3
<style type="text/css">
4 body
{background-image: url(这个地方要写的就是你的图片的url地址了);}
5
</style>
6
</head>
7
8
<body>
9
</body>
10
</html>

那个url地址的填写该如何去做呢?

比如你在E盘中新建了一个文件夹My Web,当然你的站点就是建在这里了。

而在My Web中你又新建了一个文件夹btful是专门用来放图片的,在这个文件夹中

就有一张图片的名字叫做888,而且是jpg格式的。那么这个张图片的url地址就是:btful/888.jpg。

而不要去管前面的E盘和My Web。

如果不按照上面的做法,就会失败的。

可以看到,这个背景图片的设置与背景颜色的设置方法几乎完全一样。


<2>.设置背景图片是否平铺

 1 <html>
2
<head>
3
<style type="text/css">
4 body
5
{
6 background-image
:url(btful/图片/55543583.jpg);
7 background-repeat
:no-repeat;
8
}
9
</style>
10
</head>
11
12
<body>
13
</body>
14
</html>

仔细的对照一下,这两段代码还是有一点区别的。那就是图片的repeat属性。

当background-repeat的值为repeat时,如果图片的尺寸大小没有浏览器屏幕那么大时,

这个图片就会被平铺。

当bacdground-repeat的值为no-repeat时,没有被图片覆盖的区域将会是一片的空白。

当然对于,repeat-x和repeat-y这两个参数值就表示:在x轴方向和在y轴方向上平铺图片了。

具体的效果如何,那就得动手了!

<3>设置背景图片的位置

 1 <html>
2
<head>
3
<style type="text/css">
4 body
5
{
6 background-image
:url(btful/图片/55543583.jpg);
7 background-repeat
:no-repeat;
8 background-position
: 50px 120px;
9
}
10
</style>
11
</head>
12
13
<body>
14
<h1>
15 原来如此呀
16
</h1>
17
</body>
18
</html>

这是一种用像素的方法来设置位置的。

另外还有用比例的方法,只改为background-position: 28% 36%;就可以了。

除此之外就是用关键字的方法来设置了,其中包括center, left, right, top, bottom等。

<4>设置固定的背景图片

 1 <html>
2
<head>
3
<style type="text/css">
4 body
5
{
6 background-image
:url(btful/888.jpg);
7 background-attachment
:fixed;
8
}
9
</style>
10
</head>
11
12
<body>
13
<p>图像不会随页面的其余部分滚动。</p>
14
<p>图像不会随页面的其余部分滚动。</p>
15
<p>图像不会随页面的其余部分滚动。</p>
16
<p>图像不会随页面的其余部分滚动。</p>
17
<p>图像不会随页面的其余部分滚动。</p>
18
<p>图像不会随页面的其余部分滚动。</p>
19
<p>图像不会随页面的其余部分滚动。</p>
20
<p>图像不会随页面的其余部分滚动。</p>
21
<p>图像不会随页面的其余部分滚动。</p>
22
<p>图像不会随页面的其余部分滚动。</p>
23
<p>图像不会随页面的其余部分滚动。</p>
24
</body>
25
</html>

这个属性就是通过background-attachment来控制的。

具体的效果如何,那就要自己动手了。


<5>在一个声明中声明多个属性

 1 <html>
2
<head>
3
<style type="text/css">
4 body
5
{
6 background
:#ff0000 url(btful/888.jpg) no-repeat fixed center;
7
}
8 </syle>
9 </head>
10
11 <body>
12 <p>各个属性间并无顺序</p>
13 <p>各个属性间并无顺序</p>
14 <p>各个属性间并无顺序</p>
15 <p>各个属性间并无顺序</p>
16 <p>各个属性间并无顺序</p>
17 <p>各个属性间并无顺序</p>
18 </body>
19 </html>

其实这个做法是在你了解了前面的各个属性之后的事情。

当你知道了前面的各个属性再来用这种方法,无疑会简化你的代码,提高一定的效率。



posted on 2011-09-16 20:49 More study needed. 阅读(...) 评论(...) 编辑 收藏

导航

统计

公告

书山有径勤为路>>>>>>>>

<<<<<<<<学海无涯苦作舟!