网站制作z-index简单实现引导蒙层

2013-04-27 分类：网站制作

在网站制作中，经常会用到引导蒙层，就是在某个局部位置高亮我们需要重点突出的内容，实现该效果有两个核心元素，一个是引导区域，也就是要重点突出的内容，另一个就是半透明的蒙层元素。

为了满足业务需求，会从不同角度，不同的方法来实现引导蒙层，今天成都创新互联给大家介绍一种最简单的，用z-index实现引导蒙层，具体思路如下：

新增一个div，设置为半透明区域，大小覆盖整个页面；

半透明蒙层区域z-index大于页面元素；

引导内容区域大于半透明蒙层区域z-index

页面元素都是有层级的，我们只需要把引导内容区域设置为最顶层的层级，在引导内容区域之下设置一个遮罩层，其他内容元素的z-index都地域这个遮罩层即可。下边给大家举一个例子：

<!DOCTYPE html>

<html>

<head>

<style>

.z1{

position:absolute;

left:50px;

top:50px;

width:50px;

height:50px;

background:blue;

z-index:1;}

.z2{

position:absolute;

left:60px;

top:60px;

width:50px;

height:50px;

background:red;

z-index:2;}

.z3{

position:absolute;

left:70px;

top:70px;

width:50px;

height:50px;

background:yellow;

z-index:3;}

</style>

</head>

<body>

</body>

</html>

修改一下z2样式：

.z2{

position:absolute;

left:50px;

top:50px;

width:50px;

height:50px;

background:black;

opacity:0.5;

z-index:2;

animation:z_index 2s linear infinite alternate;}

@keyframes z_index{

from{

left:50px;

top:50px;

width:50px;

height:50px;

}

to {

left:0px;

top:0px;

width:200px;

height:200px;

}}

只要在布局页面元素的时候，把需要做蒙层的元素确定好，配合js，动态的设置元素的z-index + opacity，就可以很好的做到页面的引导蒙层效果。

本文题目：网站制作z-index简单实现引导蒙层
URL网址：https://www.cdcxhl.com/news0/800.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站制作等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容