10背景相关属性

 文件代码与图片所在的文件夹是属于同级，故图片是代码（图片所在文件夹）的下一级

 图片运行后有很多重复的background-repeat

 

 设置背景图片 的位置background-position

运行后在网页，右击，检查，可以调整位置

 

 

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             #box{
 8                 width: 400px;
 9                 height: 400px;
10                 /*设置背景颜色*/
11                 /*background-color: gray;*/
12                 /*设置背景图片*/
13                 /*background-image: url("./img/head.jpg");*/
14                 /*设置一个边框*/
15                 /*border:2px solid black;*/
16                 /*设置背景图片是否重复 no-repeat 表示不重复 repeat-x在x轴重复 repeat-y */
17                 /*background-repeat: no-repeat;*/
18                 /*设置背景图片的位置*/
19                 /*background-position: 10px(x轴) 20px(y);*/
20                 /*background-position: 10px 20px;*/
21                 /*简写*/
22                 background:gray url("./img/head.jpg") no-repeat 10px 20px ;
23             }
24         </style>
25     </head>
26     <body>
27         <div id="box"></div>
28     </body>
29 </html>

 

posted @ 2019-09-02 10:20  慕少溪梓  阅读(116)  评论(0)  编辑  收藏  举报