background综合属性
2,439 阅读
<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>
