...
设置元素的背景：
background - color属性用来为元素设置背景颜色。需要指定一个颜色值，当指定了一个颜色以后，整个元素的可见区域都会使用这个颜色作为背景色。如果不设置透明颜色，元素默认背景颜色为透明，实际上会显示父元素的背景颜色。
background - image 可以为元素指定背景图片，和background - color类似，这不过这里使用的是一个图片作为背景。需要一个url地址作为参数，url地址需要指向一个外部图片的路径
background - repeat 用于控制背景图片的重复方式。如果设置背景图片默认背景图片将会使用平铺方式可以通过该属性进行修改。
可选值：
-reprat 默认值，图片左右上下平铺
-no-repeat： 只显示图片一次，不会平铺
-repeat-x：沿x轴水平平铺一张图片
-repeat-y： 沿y轴水平平铺一张图片
background-position用来精确控制背景图片在元素的位置。可以通过三种方式来确定图片的水平方向和垂直方向的起点。
关键字：top right bottom left center
百分比
数值
back'ground-attachment用来设置背景图片是否随页面滚动。
scroll：随页面滚动
fixed：不随页面滚动
background 是背景的简写属性，通过这个属性可以一次性设置多个样式，而且样式的顺序没有要求
CSSsorite是一种网页图片应用处理方式。通过这种方式我们可以将网页中的零星图片集中放到一张大图上，这样一来，一次请求可以同时多加载多找图片，大大提高了图片的加载的效率。
...
作业：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的层级</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 2;
opacity: 0.5;
filter: alpha(opacity=50);
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
position: absolu
top: 100px;
left: 100px;
z-index: 25;
opacity: 0.5;
filter: alpha(opacity=50);
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
position: absolute;
top: 200px;
left: 200px;
z-index: 30;
opacity: 0.5;
filter: alpha(opacity=50);
}
.box4{
width: 200px;
height: 200px;
background-color: orange;
position: relative;
z-index: 20;
top: 500px;
}
.box5{
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
z-index: 10;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
<div class="box5"></div>
</div>
</body>
</html>
网友评论