CSS设置背景——图片背景

最新推荐文章于 2023-07-31 10:33:27 发布

Stand1210

最新推荐文章于 2023-07-31 10:33:27 发布

阅读量663

点赞数 1

分类专栏： HTML/CSS

HTML/CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>