您的位置：首页 > Web前端 > CSS

CSS设置背景——图片背景

2016-10-07 23:34 225 查看

Miss it

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>

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航