码迷,mamicode.com
首页 > 其他好文 > 详细

第四十二节 blackground属性

时间:2020-03-05 23:42:25      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:doc   设置   图片   缺省值   pre   no-repeat   htm   border   idt   

 1 <!-- 属性解释:background属性是CSS中应用较多的,且比较重要的一个属性,它负责给盒子设置背景图片和背景颜色,background是一个符合属性,它可以分解成如下几个设置项:
 2     1、background-color:设置背景颜色
 3     2、background-image:设置背景图片地址
 4     3、background-repeat:设置背景图片如何重复平铺
 5     4、background-position:设置背景图片的位置
 6     5、background-attachment:设置背景图片是固定还是随页面滚动 -->
 7 <!DOCTYPE html>
 8 <html lang="en">
 9 <head>
10     <meta charset="UTF-8">
11     <title>Document</title>
12     <style type="text/css">
13         .con{
14             width: 200px;
15             height: 200px;
16             border: 1px solid black;
17             margin: 50px solid 0;
18             /*background-image: url(图片1.png);*/
19             /*background-repeat: no-repeat;*/
20             /* 有四个属性:
21                     1.repeat-x 只平铺x方向
22                     2.repeat-y 只平铺y方向 
23                     3.no-repeat 只平铺一次
24                     4.repeat 缺省值,平铺所有 */
25             /*background-position: center top;*/
26             /*background-position: 20px 10px;*/
27             /*水平方向: left right center
28               垂直方向: top right botton 
29               或者使用像素*/
30 
31             background: url(图片1.png) -82px -84px no-repeat #FFF;  /* 常用写法 */
32         }
33     </style>
34 </head>
35 <body>
36     <div class="con"></div>
37 </body>
38 </html>

 

第四十二节 blackground属性

标签:doc   设置   图片   缺省值   pre   no-repeat   htm   border   idt   

原文地址:https://www.cnblogs.com/kogmaw/p/12423846.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!