HTML----元素层级
2018-08-14 本文已影响0人
梵高先生uu
元素的层级
内容已在代码
<!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;--/
