兼容ie和firefox的透明div的css代码

最新推荐文章于 2021-06-14 21:52:36 发布
最新推荐文章于 2021-06-14 21:52:36 发布 · 115 阅读 · 0
文章标签：

#IE #Firefox #CSS #XHTML #HTML

本文介绍如何使用CSS代码轻松实现浏览器兼容的透明层效果。通过设置filter和-moz-opacity属性，可确保IE和Firefox等浏览器中的一致显示。值得注意的是，为使透明效果在IE下生效，div元素必须定义width属性。

也许你有的时候需要实现透明层的特殊效果，其实通过css代码就可以很简单的实现，并且兼容ie和firefox，代码如下：filter:alpha(opacity=20);-moz-opacity:0.20;在div的样式代码里面加上就可以了，filter:alpha(opacity=20)控制ie下的效果，这里的20可以是0到100之间，数值越大，透明度越低，-moz-opacity:0.20控制firefox下的效果，这里的0.20可以是0到1之间的数，也是数值越大，透明度越低。

但是这里有一个非常重要需要注意的问题，这个层必须有width属性，否则在ie下是看不到透明效果的，你可以拷贝下面的代码进行测试，看看两种css代码在ie和firefox下的效果区别。

代码1：div不带width属性

<!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>无标题文档</title>
</head>

<body style="background-color:#FFE1F0">
<div style="background:#00FF66;filter:alpha(opacity=20);-moz-opacity:0.20;">
<p>透明层效果的实现</p>
<p>透明层效果的实现</p>
</div>
</body>
</html>


代码2：div带width属性

<!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>无标题文档</title>
</head>

<body style="background-color:#FFE1F0">
<div style="background:#00FF66;filter:alpha(opacity=20);-moz-opacity:0.20;width:300px">
<p>透明层效果的实现</p>
<p>透明层效果的实现</p>
</div>
</body>
</html>

http://www.corange.cn/archives/2008/10/2128.html

IE8 滤镜效果filter:alpha(opacity=20);IE下失效出现黑色
12-04
坐一个滤镜效果，CSS样式如下： 复制代码代码如下: .mask { width:100%; height:100%; background-color:#000 ; position:fixed; top:0px; left:0px; opacity:0.2; /* IE 8 */ filter:alpha(opacity=20); /* Firefox,Safari(WebKit),Opera */ -ms-filter:alpha(opacity=20); /* IE 4-7 */ zoom:1; /* set “zoom”,”width” or “height” to trigger
div+css最小高度的实现代码(兼容ie6/ie7/ie8/firefox)
12-29
我们在用DIV+CSS布局文章内容页面的时候，往往会让DIV或其他元素自适应高度，可是当发布者发布的内容比较少的时候，比如只有一行字，那内容部分就变的很小，不... //IE7以上/Firefox _height:500px; //IE6 height:100%;
兼容IE6+,firefox等主流浏览器的透明度代码
cychai的专栏
01-06 945
兼容IE6+,firefox等主流浏览器的透明度代码
CSS基础（二十）--Position之Opacity设置标签透明度
09-20 227
随笔记录方便自己和同路人查阅，学习CSS时最好先学会HTML。 #------------------------------------------------我是可耻的分割线------------------------------------------- Opacity透明度1表示没有透明度 未加opacity显示 <!DOCTYPE html> &l...
IE8 滤镜效果失效［ filter:alpha(opacity=20);］
Draco
08-28 1万+
坐一个滤镜效果，CSS样式如下： .mask { width:100%; height:100%; background-color:#000 ; position:fixed; top:0px; left:0px; opacity:0.2; /* IE 8 */ filter:alpha(opacity=20); /* Firefox,Safari(WebKit),Op
CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
热门推荐
freshlover的专栏
12-05 14万+
CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理，保持浏览器效果的一致，这个估计谁都会写，但是涉及到filter的具体语法含义和各版本写法的不同区别，很多人都搞不准确，我曾经问过许多群里的大牛，说的都不是很准确，网上的说法就更五花八门了。今天呢，主要是重新温习一下这个属性，并实际测试来说明正确的写法，和IE各版本的支持度和书写区别。 首
如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器
12-13
CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中4.FF: 设置 padding 后, div...
css div实现的遮罩层完美兼容IE6-IE9 FireFox
09-25
本篇文章将详细介绍如何使用CSS和div元素来创建一个兼容IE6到IE9以及Firefox的遮罩层。 首先，我们需要在HTML中定义两个div元素。一个是`#black_overlay`，它作为遮罩层，覆盖整个页面，通常具有半透明黑色背景；另...
如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.pdf
03-22
针对标题提及的"如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器"，这里将详细讨论一些关键的CSS兼容性问题及解决方案。 1. **DOCTYPE的影响**： DOCTYPE声明会影响浏览器进入何种文档模式。在HTML4或...
opacity
xinwenhuayu的博客
02-06 6021
1. 作用 设置元素的透明背景 2. 取值 (1) 取值范围0~1 (2) 0表示完全透明，1表示完全不透明，0.5表示半透明 3. 示例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>opacity</title> <...
针对前端网页测试时，filter:alpha(opacity=20)；在IE8及以下版本刷新无效情况
mounwater的博客
02-04 543
针对前端网页测试时，filter:alpha(opacity=20);在IE8及以下版本刷新无效情况解决办法 最近在学习前端方面的知识，了解到了opacity这个属性，可以设置元素的透明度显示，但是这个属性在IE8及以下版本会失效，我们通常都会在这里的后面加几句适配语句，解决不同浏览器和IE8及以下版本浏览器兼容问题。 比如： `opacity:0.2; /* IE 8 */ filter:alpha(opacity=20); /* Firefox,Safari(WebKit),Opera */ -ms-f
filter:alpha()与opacity的区别
qq_44929535的博客
01-11 3355
filter:alpha()与opacity都是用来设置透明度的，区别就在于兼容性的问题，opacity支持高版本的浏览器，IE8以上不包含IE8. opacity 1.opacity的取值范围在0到1之间，1代表完全不透明。 filter:alpha() 1.filter:alpha(opacity=20）表示设置透明度为20，其中透明度范围为0-100，100为不透明。 2.filter：alpha（opacity，finishopacity，style，startX，startY，finishX，fi
css 的 opacity 属性
艾斯比
06-14 6562
opacity 用于指定元素透明度, 支持 0~1 之间的小数. 默认值 1-完全不透明, 0-完全透明 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>opacity</title> <style> /* opacity 默认 1, 完全不透明 0 完全透明
opacity透明属性
YuTinH的博客
05-24 1001
opacity透明属性： 例如：opacity：0.5； fliter：alpha(opacity=50);
结构-行为-样式-Css笔记
ailiwei2014的博客
11-10 197
0、常见的行级元素和块级元素： 　　块级元素： 　　address,article,aside,audio,blockquote,canvas, 　　dd,div,dl,fieldset,figcaption,figure,footer,form, 　　h1-6,header,hgroup,hr,noscript,ol,output,p, 　　pre,section,tab...
多功能仿真软件Multisim中MC1496信号乘法混合电路仿真资源
最新发布
11-27
本资源包含了一个使用Multisim仿真软件实现的MC1496信号乘法混合电路的工程文件。此电路是根据网络上的电路图自主绘制的，旨在帮助电子爱好者、工程师及学生更好地理解和学习信号乘法混合电路的原理及其在实际应用中的表现。 文件描述 文件名：multisim仿真MC1496实现的信号乘法混合.rar 内容：Multisim仿真工程文件，包含电路图和相关仿真设置。 注意事项 本资源为仿真文件，运行前请确保已安装Multisim仿真软件。 电路图仅供参考，如有任何疑问或需要帮助，请根据个人学习途径寻求解答。 本资源中所包含的电路图是根据网上资料自主绘制，如有不准确之处，请以实际应用为准。 使用说明 解压下载的文件至指定文件夹。 打开Multisim软件，选择“打开工程”功能，找到并打开解压后的工程文件。 根据个人需求进行仿真实验或修改电路参数。
基于PyQt5的Python图书管理系统开发实践
11-27
采用PyQt5框架与Python编程语言构建图书信息管理平台 本项目基于Python编程环境，结合PyQt5图形界面开发库，设计实现了一套完整的图书信息管理解决方案。该系统主要面向图书馆、书店等机构的日常运营需求，通过模块化设计实现了图书信息的标准化管理流程。 系统架构采用典型的三层设计模式，包含数据存储层、业务逻辑层和用户界面层。数据持久化方案支持SQLite轻量级数据库与MySQL企业级数据库的双重配置选项，通过统一的数据库操作接口实现数据存取隔离。在数据建模方面，设计了包含图书基本信息、读者档案、借阅记录等核心数据实体，各实体间通过主外键约束建立关联关系。 核心功能模块包含六大子系统： 1. 图书编目管理：支持国际标准书号、中国图书馆分类法等专业元数据的规范化著录，提供批量导入与单条录入两种数据采集方式 2. 库存动态监控：实时追踪在架数量、借出状态、预约队列等流通指标，设置库存预警阈值自动提醒补货 3. 读者服务管理：建立完整的读者信用评价体系，记录借阅历史与违规行为，实施差异化借阅权限管理 4. 流通业务处理：涵盖借书登记、归还处理、续借申请、逾期计算等标准业务流程，支持射频识别技术设备集成 5. 统计报表生成：按日/月/年周期自动生成流通统计、热门图书排行、读者活跃度等多维度分析图表 6. 系统维护配置：提供用户权限分级管理、数据备份恢复、操作日志审计等管理功能 在技术实现层面，界面设计遵循Material Design设计规范，采用QSS样式表实现视觉定制化。通过信号槽机制实现前后端数据双向绑定，运用多线程处理技术保障界面响应流畅度。数据验证机制包含前端格式校验与后端业务规则双重保障，关键操作均设有二次确认流程。 该系统适用于中小型图书管理场景，通过可扩展的插件架构支持功能模块的灵活组合。开发过程中特别注重代码的可维护性，采用面向对象编程范式实现高内聚低耦合的组件设计，为后续功能迭代奠定技术基础。 资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！
理工科研究生学习课程-最优化理论与方法
11-27
文档主要为最优化理论与方法学习过程中的笔记记录，包含各类题型，牛顿法，最速下降法，单纯形法，动态规划法，大M法等
【硕士论文完美复现】【价格型需求响应】基于需求侧响应的配电网供电能力综合评估（Python代码实现）
11-27
【硕士论文完美复现】【价格型需求响应】基于需求侧响应的配电网供电能力综合评估（Python代码实现）内容概要：本文档是一份关于“基于需求侧响应的配电网供电能力综合评估”的硕士论文复现资源，重点围绕价格型需求响应展开，结合Python代码实现，对配电网在考虑用户侧响应情况下的供电能力进行建模与评估。内容涵盖电力系统中需求响应机制的设计、负荷调整模型的构建、优化算法的应用以及供电能力的量化分析，旨在通过仿真手段提升配电网运行效率与可靠性，并验证所提方法的有效性。文档还附带完整的代码资源链接，便于读者复现实验结果。; 适合人群：具备一定电力系统基础知识和Python编程能力的研究生、科研人员及从事智能电网相关工作的技术人员。; 使用场景及目标：①用于学习和复现硕士论文中的需求响应模型与供电能力评估方法；②支撑科研项目中对配电网灵活性与用户侧互动机制的研究；③为微电网、虚拟电厂等领域的优化调度提供技术参考。; 阅读建议：建议结合文中提供的网盘资源下载完整代码与数据，边运行代码边理解模型细节，重点关注需求响应建模与供电能力计算的实现逻辑，同时可扩展应用于其他优化场景。
"专业 CSS兼容IE和Firefox技巧集合
这些技巧可以帮助网页设计师更好地处理CSS兼容IE和Firefox的问题，确保网站在不同浏览器上的正常显示。如果学习并掌握了这些技巧，就能够更加轻松地应对不同浏览器的兼容性问题，提高网页的用户体验。因此，对于有关...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值