前端 元素的层级 背景
2018-08-13 本文已影响0人
现实里的童话xklss
元素的层级
内容已在代码
<!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
效果
默认效果
默认效果
鼠标移动到的效果
鼠标点击时的效果
