利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器
直接上代码,兼容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>
- 相关阅读
- web2.0网页--常用的XHTML标签的使用技巧方法介绍
- uni-app实现tab选项卡
- access数据库做的网站出现.ldb不能删除超过2KB之后就会网站访问不了数据库,提示数据库不存在
- 九江市交通国际旅行社有限公司
- CSS设计符合Web标准的网页表单的几个技巧
- Div+CSS布局应该注重语义、注重代码的重用性
- 阳光港澳旅行网
- 微信小程序腾讯视频播放组件tencentvideo(wxa75efa648b60994b)
- 共有0条关于《利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器》的评论
- 发表评论
正在加载评论......
返回顶部发表评论
网友评论声明,请自觉遵守互联网相关政策法规。
您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。
- 更多>>同类信息
- jquery设置或获取修改classname
- 利用css3.0写出一个音乐播放的唱片碟盘的效果
- 利用css中的scale()实现放大缩小效果
- 利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明
- css背景使用base64编码或者将base64编码放在img图片标签中
- 利用css3中的-webkit-font-smoothing把网页文字的毛边去掉
- 更多>>最新添加文章
- dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
- Android移动端自动化测试:使用UIAutomatorViewer与Selenium定位元素
- 抖音直播音挂载小雪花 懂车帝小程序
- javascript获取浏览器指纹可以用来做投票
- 火狐Mozilla Firefox出现:无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
- 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径
- python通过代码修改pip下载源让下载库飞起
- python里面requests.post返回的res.text还有其它的吗