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. 阅读(61437) 评论(0) 编辑 收藏 举报
