HTML学习笔记8——CSS设置背景图片

注意点：   background：blue；

                       与  

　　　　　background-color：blue；

　　　　　不一样！

一、关于background设置：

　　   1）background：blue；

　　   2）background-image：url(图片名称)；  

  当背景既有颜色，又有图片时，哪个在后面哪个就生效，如下例所示；

　　此处写了“新宋体”的这张图片作为本文涉及到的背景图片。

　　以图片为背景时，若图片小于页面大小，则图片会一直重复直到铺满为止；

字在后面时，字生效 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS设置背景图片</title>
 6 </head>
 7 <style type="text/css">
 8     #picture
 9     {
10         width:600px;
11         height :400px;
12         background: blue;
13         background-image: url(ziti.png);
14     }
15 </style>
16 <body>
17     <div id="picture">
18         
19     </div>
20 </body>
21 </html>
View Code

 

颜色在后面时，颜色生效 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS设置背景图片</title>
 6 </head>
 7 <style type="text/css">
 8     #picture
 9     {
10         width:600px;
11         height :400px;
12         background-image: url(ziti.png);
13         background: blue;
14     }
15 </style>
16 <body>
17     <div id="picture">
18         
19     </div>
20 </body>
21 </html>
View Code

二、当使用以下两种时：

         1）background-color：red；

　　   2）background-image：url(图片名称)；  

  当背景颜色既设置颜色，又设置图片时，图片优先显示。(有些网站不仅设置图片背景，还同时设置背景色~好处，额，我在知乎看到好多~大概是说让用户体验更优，减少错误率)

如下例所示：

虽然background-color写在后面，但图片优先显示 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS设置背景图片</title>
 6 </head>
 7 <style type="text/css">
 8     #picture
 9     {
10         width:600px;
11         height :400px;
12         background-image: url(ziti.png);
13         background-repeat: no-repeat;
14         background-position: center;
15         background-color: red;
16     }
17 </style>
18 <body>
19     <div id="picture">
20         
21     </div>
22 </body>
23 </html>
View Code

三、想要解除重复属性，或者控制其在x或者y方向上重复时，可在<style></style>中用   background-repeat：no-repeat；不重复

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　      repeat-x;     在水平方向铺满

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　      repeat-y;     在竖直方向铺满

效果如下：

四、一般情况下，背景图片默认从左上角开始铺，使用background-position 属性可定义其位置，如：右边，中间等。

另外，还可以使用background-position 属性对图片位置进行精确的控制，详见下一篇学习笔记 ：）

五、background-attachment：fixed；  在页面很大时，可使该图片不随着滚动条的移动而消失在视野中，它会一直显示在页面已经定义好的地方。

 

posted @ 2016-07-14 22:45  Chrisreen  阅读(796)  评论(0)  编辑  收藏  举报