元素的层级

内容已在代码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>元素的层级</title>
   <style type="text/css">
       .box1{
           width: 200px;
           height: 200px;
           background-color: pink;
       }
       .box2{
           width: 200px;
           height: 200px;
           background-color: red;
           position: absolute;
           top: 100px;
           left: 100px;
           z-index: 1
       }
            /*z-index 设置z轴的层级*/
       .box3{
           width: 200px;
           height: 200px;
           background-color: blue;
           position: relative;
       }
           /*父元素的层级在高 也不会盖着子元素*/
           /*opacity 设置元素的背景透明   0-1  0.5半透明*/
           /*ie8 级 以下不能设置透明  设置的话用 filter:alpha(opacity=50)  ie 专有的 最好两个都写上*/
   </style>
</head>
<body>
   <div class="box1"></div>
   <div class="box2"></div>
   <div class="box3"></div>
</body>
</html>

背景

background-repeat 设置背景重复
background-position 设置图片的位置:
top lefttop center top right center left center center center right
background-attachment 设置图片 fixed 固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style type="text/css">
        .box1{
            width: 1000px;
            height:1000px;
            margin: 0 auto;
            background-color: pink;
            background-image:url(img/1.jpg);
            background-repeat: repeat-y;
        }
        /*background-repeat  设置背景重复*/
        /*background-position 设置图片的位置，top left
        top center top right center left center center center right */
        /*background-attachment 设置图片 fixed 固定*/
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>
/--简写背景属性  background:#bfa url(img/1.png) no-repeat fixed center;--/

购物车例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>亚马逊</title>
    <style type="text/css">
        .b:link{
            display: block;
            width:50px;
            height: 35px;
            background-image:url(img/1_.png);
            background-repeat: no-repeat;

        }
        .b:hover{
            background-image: url(img/2.png);
        }
        .b:active{
            background-image: url(img/3.png);
        }
    </style>
</head>
<body>
    <a href="#" class="b"></a>
</body>
</html