利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器
需要定制网站程序、公众号程序、微信小程序可以联系：565449214或者加微信13961347334(备注：需要技术)
或者在处理一些技术问题时，有什么不懂的地方，随时可以加我QQ:565449214讨论技术或者加QQ群62655404讨论
或者在处理一些技术问题时，有什么不懂的地方，随时可以加我QQ:565449214讨论技术或者加QQ群62655404讨论
直接上代码，兼容IE,firefox,chrome,Safari,Opera等主流浏览器的半透明CSS代码：
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
几个属性的意思是：
opacity: 0.5; CSS的标准，支持chrome,firefox, Safari和 Opera，取值范围0-1。
filter:alpha(opacity=50); 这个是为IE设的，取值范围0-100。
-moz-opacity:0.5; 支持老版本的Mozilla，取值范围0-1。
-khtml-opacity: 0.5; 支持老版本的Safari浏览器，取值范围0-1。
以下是测试代码
<!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=gb2312" />
<title>利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器</title>
</head>
<body style="background:#09f;">
<div class="tm_fontzhi">通过CSS实现半透明，兼容IE,firefox,chrome等主流浏览器</div>
<div class="tm_fontbg"></div>
<style>
.tm_fontbg {
position:absolute;top:50px;right:50px;bottom:50px;left:50px;background:#000;z-index:99; /* 这段代码是为了实现div固定位置的不用在意这段 */
filter:alpha(opacity=50); /* 这个是为IE设的，取值范围0-100。 */
opacity: 0.5; /* CSS的标准，支持chrome,firefox, Safari和 Opera，取值范围0-1。 */
-moz-opacity:0.5; /* 支持老版本的Mozilla，取值范围0-1。 */
-khtml-opacity: 0.5; /* 支持老版本的Safari浏览器，取值范围0-1。 */
}
.tm_fontzhi {position:absolute;top:90px;right:90px;bottom:90px;left:90px;padding:0 20px;color:#fff;z-index:100;}
</style>
</body>
</html>
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
几个属性的意思是：
opacity: 0.5; CSS的标准，支持chrome,firefox, Safari和 Opera，取值范围0-1。
filter:alpha(opacity=50); 这个是为IE设的，取值范围0-100。
-moz-opacity:0.5; 支持老版本的Mozilla，取值范围0-1。
-khtml-opacity: 0.5; 支持老版本的Safari浏览器，取值范围0-1。
以下是测试代码
<!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=gb2312" />
<title>利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器</title>
</head>
<body style="background:#09f;">
<div class="tm_fontzhi">通过CSS实现半透明，兼容IE,firefox,chrome等主流浏览器</div>
<div class="tm_fontbg"></div>
<style>
.tm_fontbg {
position:absolute;top:50px;right:50px;bottom:50px;left:50px;background:#000;z-index:99; /* 这段代码是为了实现div固定位置的不用在意这段 */
filter:alpha(opacity=50); /* 这个是为IE设的，取值范围0-100。 */
opacity: 0.5; /* CSS的标准，支持chrome,firefox, Safari和 Opera，取值范围0-1。 */
-moz-opacity:0.5; /* 支持老版本的Mozilla，取值范围0-1。 */
-khtml-opacity: 0.5; /* 支持老版本的Safari浏览器，取值范围0-1。 */
}
.tm_fontzhi {position:absolute;top:90px;right:90px;bottom:90px;left:90px;padding:0 20px;color:#fff;z-index:100;}
</style>
</body>
</html>
- 相关阅读
- ( 2021/8/6 17:01:01 )uni-app开发表单input组件的一些规则说明自己预留使用
- ( 2021/7/28 10:35:24 )查询某个字符在字符串中出现的位置数组
- ( 2021/6/10 8:56:21 )百度小程序开发第一坑tcomponent自定义组件命名坑Compile san component failed. . [SAN ERROR] ROOT>swan-custom-component>view>千万不要用下划线作为自定义组件名
- ( 2021/6/8 23:24:05 )开始百度小程序开发需要准备工作
- ( 2021/5/26 14:13:02 )uni-app:使用uni.downloadFile下载word或pdf文件并保存到手机
- ( 2021/5/26 10:02:19 )小程序中利用addPhoneContact将联系人的信息添加到手机通讯录支持保存联系人头像
- ( 2021/5/11 19:12:56 )小程序打开pdf文件并保存到本地 支持远程pdf、word、xls表格文件打开
- ( 2021/5/11 18:58:19 )uni-app里面复制内容时保留换行利用正则替换br标签替换成回车换行符
- 共有0条关于《利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器》的评论
- 发表评论
正在加载评论……
返回顶部发表评论
深山工作室网友评论声明，请自觉遵守互联网相关政策法规。
您发布的评论即表示同意遵守以下条款：
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家、社会、集体和公民的合法权益；
二、不得发布国家法律、法规明令禁止的内容；互相尊重，对自己在本站的言论和行为负责；
三、本站对您所发布内容拥有处置权。
- 更多信息>>栏目类别选择
- uni-app
- rss学习
- 个人空间
- 网站设计
- 网站公告
- 下载
- photoshop学习
- ASP学习
- DIV+CSS学习
- SEO搜索引擎忧化
- java学习
- HTML学习
- 网站信息
- 网站类信息
- 更多>>同类信息
- jquery设置或获取修改classname
- 利用css3.0写出一个音乐播放的唱片碟盘的效果
- 利用css中的scale()实现放大缩小效果
- 利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明
- css背景使用base64编码或者将base64编码放在img图片标签中
- 利用css3中的-webkit-font-smoothing把网页文字的毛边去掉
- 解决手机端微信浏览器中视频自动播放和默认全屏问题
- 在table中tr的display:block在firefox下显示布局错乱问题
- 更多>>最新添加文章
- uni-app开发表单input组件的一些规则说明自己预留使用
- 查询某个字符在字符串中出现的位置数组
- 百度小程序开发第一坑tcomponent自定义组件命名坑Compile san component failed. . [SAN ERROR] ROOT>swan-custom-component>view>千万不要用下划线作为自定义组件名
- 开始百度小程序开发需要准备工作
- uni-app:使用uni.downloadFile下载word或pdf文件并保存到手机
- 小程序中利用addPhoneContact将联系人的信息添加到手机通讯录支持保存联系人头像
- 小程序打开pdf文件并保存到本地 支持远程pdf、word、xls表格文件打开
- uni-app里面复制内容时保留换行利用正则替换br标签替换成回车换行符
苏公网安备 32070502010230号