background综合属性 | DataLearnerAI

	<style type="text/css" media="screen">
	 div{
	 	width:100px;
	 	height:50px;
	 	border:1px solid black;
	 	margin-bottom:10px;
	 }	
	 .box1{
	 	background-color:red;
	 }
	 .box2{
	 	background-color:rgb(255.0.0);
	 } /*rgb表示三原色 "红"red "绿" green "蓝" blue。取值是0~255 三色都是0就是黑色
	  三色 三色都是255是白色  红+绿=黄*/
	  .box3{
	  	background-color:#ff0000;
	  } /*所有用#开头的值，都是16进制的。所以16进制中,ff就是255.*/
	  /*关于16进制 16进制就是16进一：0~9 a~f。
	  转换成十进制就是十位数*16+个位数字=十进制*/

	  /*background-image属性:*/
      .box4{
         background-image:url(image/xxx.jpg);
     } /*用于给盒子加上背景图片 url()表示网址
      uniform resouces locator 统一资源定位符*/
      /*背景会自动平铺满盒子*/

     background-repeat属性:
        .box4{
        	background-repeat:no-repeat;
        } /*背景图片是否重复,重复方式. repeat表示重复.
         属性有三种值: ① no-repeat;(不重复) ② repeat-x;(x轴重复) ③ repeat-y;y轴重复*/
         /*repeat-x;属性可以制作渐变背景*/
	/* 背景定位属性：
 background-position:100px 100px; position就是威视的意思
 background-position：向右移动量 向下移动量。 定位属性可以是负数， 同样的position属性后面可以用单词描述。描述左右的词有 left，center right。 描述上下的词有：top，center，bottom。*/
 
 /*css精灵：css sprite是一种css图像合并技术，是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
 css精灵的有点是减少了http的请求，原本需要四张小图片合并之后只需要一张图片就能显示。可以使用firework来进行定位 需要显示部分的宽度和高度就是盒子的宽高，xy轴数字就是定位数字 需要加负号*/
 
 

	.box5{
	 	background:red  url(1.jpg) no-repeat 100px 100px fixed; 等价于
        background-color:red; /*背景颜色:红色;*/
        background-image:url(1.jpg); /*背景图片*/
        background-repeat:no-repeat; /*背景是否重复*/
        background-position:100px 100px; /*背景图片位置*/
        background-attachment:fixed; /*背景图片固定*/
        /*可以省略任意部分*/
	 }
	 /*css3中将学习更多background属性*/
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
	<div class="box5"></div>
</body>

DataLearner 官方微信