注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

opacity 层级关系  

2015-02-07 18:21:16|  分类: HTML&&CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
音乐名:我的左手旁边是你的右手
表演者:赵静怡
基本特殊:单曲
发行时间:2005-6-15
发行者:中国唱片公司广州分公司
豆瓣评分:8.0分(206人评价)
博主评价:
未评价很差较差还行推荐力荐
来自豆瓣音乐资源
opacity 层级关系
先来了解一下,当一个普通的元素定义了 opacity 的值小于1时(比如 opacity:0.5),那么该元素的层叠级别将会高于普通元素。
例子代码:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>梦幻雪冰、独行冰海</title>
<link rel="stylesheet" href="reset.css" type="text/css">
<style>
.box {
width: 500px;
height: 500px;
background: #fcf;
}
.con-top {
width: 250px;
height: 200px;
background: #f00;
}
.con-bot {
width: 200px;
height: 200px;
margin-top: -100px;
background: #999;
}
</style>
</head>
<body>
<div class="box">
<div class="con-top">梦幻雪冰、独行冰海</div>
<div class="con-bot">梦幻雪冰、独行冰海</div>
</div>
</body>
</html>

显示效果:
opacity 层级关系 - 梦幻雪冰 - 梦幻雪冰
解析:在正常的文档流中,后来的元素会覆盖之前的元素,总之就是“后来居上”的原则,所以灰色的模块覆盖住红色的模块。

接下来,给红色的模块设置透明度(opacity 的值小于1时

例子代码:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>梦幻雪冰、独行冰海</title>
<link rel="stylesheet" href="reset.css" type="text/css">
<style>
.box {
width: 500px;
height: 500px;
background: #fcf;
}
.con-top {
width: 250px;
height: 200px;
background: #f00;
opacity: 0.8;
}
.con-bot {
width: 200px;
height: 200px;
margin-top: -100px;
background: #999;
}
</style>
</head>
<body>
<div class="box">
<div class="con-top">
梦幻雪冰、独行冰海</div>
<div class="con-bot">梦幻雪冰、独行冰海</div>
</div>
</body>
</html>

显示效果:
opacity 层级关系 - 梦幻雪冰 - 梦幻雪冰

结论:只要设置了小于1的透明度,那么该元素的层叠级别将会高于普通元素;当都设置了大于1的透明度,按照HTML出现的顺序层叠(后来居上的原则)。

那么如何解决呢?只要给未设置透明度的元素设置position属性,来激活z-index解决。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>梦幻雪冰、独行冰海</title>
<link rel="stylesheet" href="reset.css" type="text/css">
<style>
.box {
width: 500px;
height: 500px;
background: #fcf;
}
.con-top {
width: 250px;
height: 200px;
background: #f00;
opacity: 0.8;
}
.con-bot {
position: relative;
z-index: 2; /*具体的值根据需求而定*/

width: 200px;
height: 200px;
margin-top: -100px;
background: #999;
}
</style>
</head>
<body>
<div class="box">
<div class="con-top">
梦幻雪冰、独行冰海</div>
<div class="con-bot">梦幻雪冰、独行冰海</div>
</div>
</body>
</html>

这样显示就正常了。
opacity 层级关系 - 梦幻雪冰 - 梦幻雪冰
当然页面开发的时候一般是不会遇到问题,这个主要是让大家了解一下。

欢迎学习交流——梦幻雪冰HTML5学堂贴吧HTML5学堂微博会给大家提供更多的技术分享~~~

  评论这张
 
阅读(238)| 评论(3)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017