元素的层级和背景图片

最新推荐文章于 2022-11-29 12:32:11 发布

超超.

最新推荐文章于 2022-11-29 12:32:11 发布

阅读量5.6k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/peichaohang/article/details/85299457

版权

前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

z-index(数值)设置元素层级

设置层级后，父元素层级在高也不会盖住子元素
如果定位元素的层级是一样，则下边的元素会盖住上边的
通过z-index属性可以用来设置元素的层级
可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示
对于没有开启定位的元素不能使用z-index

opacity设置元素透明背景

opacity可以用来设置元素背景的透明，它需要一个0-1之间的值：

参数：0表示完全透明，1表示完全不透明，0.5表示半透明

在IE6中这种方法不支持，所以有下面的方法：

filter: alpha(opacity=50);
透明度，需要一个0-100之间的值，0表示完全透明，100表示完全不透明，50表示半透明

<!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: absolute;
			/*设置偏移量*/
			top: 100px;
			left: 100px;
			z-index: 25;
			opacity: 0.5;
			filter: alpha(opacity=50);
			}
		.box3{
			width: 200px;
			height: 200px;
			background-color: yellowgreen;
			/*position: relative;
			z-index: 3;*/
			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>

background-image设置背景图片

语法：background-image：url（相对路径）

代码：background-image: url(img/1.png);

background-repeat：用来设置图片的重复方式
可选值：

repeat，默认值，背景图片会双方向重复（平铺）
no-repeat，背景图片不会重复，有多大就显示多大
repeat-x，背景图片沿水平方向重复
repeat-y，背景图片沿垂直方向重复

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>背景</title>
	<style type="text/css">
		.box1{
			width: 1024px;
			height: 724px;
			margin: 0 auto;
			/*设置背景样式*/
			background-color: #bfa;
			background-image: url(img/1.png);
			background-repeat: repeat-y;
		}
	</style>

	<!-- <link rel="stylesheet" type="text/css" href="css/bgstyle.css"> -->
</head>
<body>
	<div class="box1"></div>
</body>
</html>

超超.

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
元素的层级和背景图片

z-index(数值)设置元素层级设置层级后，父元素层级在高也不会盖住子元素如果定位元素的层级是一样，则下边的元素会盖住上边的通过z-index属性可以用来设置元素的层级可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示对于没有开启定位的元素不能使用z-indexopacity设置元素透明背景opacity可以用来设置元素背景的透明，它需要...
复制链接

扫一扫