css实现遮罩层,父div透明,子div不透明
使用元素的opacity 属性,设置遮罩层的效果, 主要 样式是:background-color: #ooo; opacity:0.3;
<div style="width:500px; height:500px;position:fixed; top :0px;background-color:#000;opacity:0.3;text-align:center">
<div style="float:right; width:100px;height:100%; z-index:10;line-height:500px;background-color:blue;opacity:1;">dfaaf
</div>
</div>
原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看。
可以使用一张透明的图片做背景可以达成效果,但是有没有更简单的方法呢?使用RGBA。
<div style="width:500px; height:500px;position:fixed; top :0px;background-color:#000;background: rgba(0, 0, 0, 0.5);text-align:center">
<div style="float:right; width:100px;height:100%; z-index:10;line-height:500px;background-color:blue;opacity:1;">dfaaf
</div>
</div>
解释:这是黑色半透明的代码(设置背景色 同时设置opacity(透明度,取值范围0-1))
前三个值表示颜色的red,green,blue值
最后一个表示alpha值,就是透明度值,不透明为1
(支持IE8+以及所有现代浏览器)
父级div 使用rgba ,效果可以了,如下图;
怎么实现父级div透明,子div不透明呢?下面这个代码片段还可以参考:
原文: http://www.cnblogs.com/mxw09/archive/2011/09/27/2193238.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css外层DIV半透明内层div不透明-弹出层效果的实现【实例】</title>
<style type="text/css">
<!--
body,td,th {
font-size: 12px; padding:0; margin:0;
}
.tanchuang_wrap{ width:600px; height:400px;position:absolute;left: 0px;top: 0px;z-index:100; display:none;}
.lightbox{width:600px;z-index:101; height:400px;background-color:red;filter:alpha(Opacity=20);-moz-opacity:0.2;opacity: 0.2; position:absolute; top:0px; left:0px;}
.tanchuang_neirong{width:353px;height:153px;border:solid 1px #f7dd8c;background-color:#FFF;position:absolute;z-index:105;left: 123px;top: 123px;}
-->
</style>
<script language="javascript">
function closeDiv(divId){
document.getElementById(divId).style.display = 'none';
}
function displayDiv(divId){
document.getElementById(divId).style.display = 'block';
}
</script>
</head>
<body>
<div style="width:400px; height:400px; position:relative; text-align:center;">
<div class="tanchuang_wrap" id="aaaa">
<div class="lightbox"></div>
<div class="tanchuang_neirong">
<p><span onClick="closeDiv('aaaa')" style=" cursor:pointer;">关闭</span></p>
这里是弹窗内容
</div>
</div>
<span onclick="displayDiv('aaaa')" style="cursor:pointer;">点击我</span>
<p>测试通过,兼容IE6.0、IE7.0、火狐3.6、遨游等各大浏览器</p>
</div>
</body>
</html>
效果如下图:
css实现遮罩层,父div透明,子div不透明的更多相关文章
- CSS常用遮罩层
为什么80%的码农都做不了架构师?>>> CSS常用遮罩层 应用场景: 上传了一张图片,鼠标移入到图片上的时候显示遮罩层,并且提示点击删除. 通过改变遮罩层的透明度来实现显示隐藏 ...
- html、css和js原生写一个模态弹出框,顺便解决父元素半透明子元素不透明效果
模态框: html部分: <!-- 按钮 --> <button id="box" onclick="pop_box()">弹出框< ...
- CSS+DIV:父DIV相对定位+子DIV绝对定位
如何在一个div内将一个div进行绝对定位呢?很简单,把父div的position属性设为relative,子div的position属性设为absolute就可以了... 示例: <html& ...
- css 父div如何包裹带有float属性的子div,float子div如何撑开父div
来自网络摘抄 原始代码 <style> #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px ...
- Jquery实现遮罩层,就是弹出DIV周围都灰色不能操作
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC & ...
- 【html】【8】div布局[子div在父div居底]
从今天起 开始细话div布局 思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: ab ...
- css hover遮罩层
马上月底了, 这个月忙于工作和生活, 没有很好的写一篇博客, 有点忧伤. 为了弥补, 就写点简单的. 最近项目有个需求, 就是鼠标移入的时候显示一个层, 移除的时候这个层消失. 当然层是可以点击进行额 ...
- 前端小结(3)---- 添加遮罩层,并弹出div
有如下div: <div id='pop-div' class="pop-box"> <div class="input-group has-info& ...
- css实现遮罩层(解决透明背景上的文字不透明)
.PopUp_layer{ position:fixed; top: 0; left: 0; right:0; bottom:0; width:100%; height:1 ...
随机推荐
- ADO读取EXCEL
窗体上拖放ADOQuery1,DataSetProvider1,DataSource1,ClientDataSet1,OpenDialog1, ExcelApplication1,ExcelWorkb ...
- window.setTimeout()函数的使用
<script type="text/javascript"> //此程序主要完成页面定时关闭功能 function closeMyWindow() { window. ...
- android实习程序6——拨号通话
拨号通话 ListView GridView AdapterView 在路径android-sdkr16\android-sdkr16\platform-tools确认存在adb.exe 下载youl ...
- vps使用(centos)
javaweb开发,vps来做个人测试 首先配置vps(centos) 1.安装javeweb环境 用ssh远程服务器后,中文乱码,因为ssh的字符集和服务器的字符集不一致,服务器是utf-8,可以通 ...
- 计算字符串中每种字符出现的次数[Dictionary<char,int>泛型集合用法]
有一道经典的面试题: 统计 welcome to china中每个字符出现的次数,不考虑大小写. 第一个出现在脑海里的想法是: 1. 将字字符串转换成 char数组: 2. 用 for循环遍 ...
- hdu1046
#include<iostream> #include<cmath> using namespace std; int main() { int T,t=0,m,n; cin& ...
- CodeForces 635C XOR Equation
位运算. 又涨姿势了:$a + b = (aXORb) + 2*(aANDb)$,$ (aXORb)$是不进位的部分,$2*(aANDb)$为进位之后的部分,相加就是$a + b$. 知道了这个转换, ...
- centos6 安装python2.7+和神器pip
centos自带python版本是2.6.6,需要采用编译安装的方法安装py27 1.提前yum安装python以及pip神器依赖包(有没有必要都装上就是了,早晚有用): yum install -y ...
- XtraBackup增量备份
mysql:5.6.29xtrabackup:2.2.10mysql数据目录:/data/mysqlmysql备份目录:/data/dbbak/ #确保有足够的磁盘空间 官方文档:https://ww ...
- android 蓝牙连接与通讯(Bluetooth)
最近做了一个小项目,关于蓝牙的一个智能硬件.其中涉及到了蓝牙模块的操作.特记下蓝牙模块的操作过程.只记录下关于蓝牙部分的操作,具体业务逻辑不涉及其中.重点是记录下蓝牙的扫描.链接.通讯. 在使用蓝牙模 ...