CSS 半透明滤镜在FIREFOX和IE下面的能够通用的写法

最新推荐文章于 2021-06-03 22:27:18 发布
最新推荐文章于 2021-06-03 22:27:18 发布
阅读量432 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： firefox css ie filter html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Do_it__/article/details/6062233
本文介绍了一种用于设置HTML元素透明度的CSS代码，并提供了适用于不同浏览器的兼容性写法。包括IE浏览器使用的Alpha滤镜、Firefox和其他现代浏览器支持的-moz-opacity及opacity属性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

CSS代码


 这三句中：第一句是ie 支持； 第二三句是firefox支持的,但是火狐。版本不一样就有两种了,所以用时候把三句都加上就行了。

滤镜的有效HTML标记：

BODY

BUTTON  

DIV    

IMG  

INPUT  

MARQUEE   

SPAN   

TABLE   

TD   

TEXTAREA   

TH  

TR  


 

CSS实现让文字半透明显示在图片上的方法
09-25
标题中的“CSS实现让文字半透明显示在图片上”是一个常见的网页设计技巧，它涉及到CSS层叠样式表的多个属性和技巧。以下是对这个主题的详细说明： 首先，要实现文字半透明显示在图片上，我们需要创建一个包含图片和...
CSS滤镜同时过滤文字的问题的解决方法
09-25
同时，还提到了IE特有的滤镜功能并不被Firefox支持，所以在为Firefox优化时可以不使用星号（*）前缀。 针对透明滤镜，通常推荐使用CSS3的RGBA颜色模型或者opacity属性，它们可以设置元素的颜色和透明度，而且对所有...
CSS半透明滤镜在FIREFOX和IE下面的能够通用的写法
xjiaozhen
03-15 852
CSS半透明滤镜在FIREFOX和IE下面的能够通用的写法，记录下来备用： CSS代码 .test{      background:#000;      color:white;      width:200px;      position:absolute;      left:10px;      top:10px;       filter: Alp
转 CSS半透明滤镜在FIREFOX和IE下面的能够通用的写法
weixin_30617561的博客
07-09 82
CSS半透明滤镜在FIREFOX和IE下面的能够通用的写法，记录下来备用： CSS代码 .test{ background:#000; color:white; width:200px; position:absolute; left:10px; top:10px; filter: Alpha...
完美兼容ie6,ie7,ie8以及firefox的css透明滤镜
u011927449的博客
01-18 211
本例是一个兼容IE6/IE7/IE8和火狐浏览器的css实现半透明层效果，之前本人也遇到过这样的问题，就是把一个层设置半透明后，内的文字也跟着半透明了，一直没找到合适的解决办法，今天看到designc...
html背景图片半透明写法,IE6下用CSS使PNG半透明背景图片效果
weixin_30646903的博客
06-03 227
PNG半透明背景图片效果PNG图片在网页设计中扮演着一个很重要的角色，利用PNG图片的特点可以制作出实用,绚丽的效果，可是对于PNG图片的支持却不是很理想，Firefox和Opera对PNG支持的比较好，特别是Firefox浏览器。可是IE却不理PNG,使得设计者无法很随意的使用png图片。IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG(Port...
遮罩层IE8的兼容写法 CSS hack
lanyangy的博客
11-13 1034
遮罩层IE8的兼容写法 CSS hack一、先看看IE8 CSS hack的基本用法二、遮罩层IE8的兼容写法 一、先看看IE8 CSS hack的基本用法 IE8 CSS hack 就是在属性后面加上 \9 或者 \0,代码如下： div{ color: orange; color:red\0; /* IE8+ css hack*/ ...
html中如果设置颜色为半透明状态,CSS半透明属性介绍及代码实例
weixin_28730927的博客
05-30 1757
当我们在做网页的时候，有时为了整体页面搭配的美观，需要设置层样式为透明或者半透明，因为透明往往能产生不错的网页视觉效果。在使用的背景的页面中，如果不设置页面内容区为半透明状态，突出不了背景的作用，也显得不那么协调。用传统的CSS实现背景半透明效果的方法是用两个层，一个放文字，另一个做透明背景，但是透明滤镜的效果会影响到里面的内容。如果只需要在IE下实现，是有更简单的方法可以实现的。CSS半透明属性...
只半透明背景不透明文字的CSS写法
04-24 1554
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 只半透明背景不透明文字的CSS写法-懒人建站 #container{ border:1px solid #c00; background-color:rgba(212,0,0,0.5); *background:#f00; *filter:alpha
firefox和IE都支持的半透明
程序员成长之路
09-18 392
CSS半透明滤镜在FIREFOX和IE下面的能够通用的写法，记录下来备用： CSS代码 .test{      background:#000;      color:white;      width:200px;      position:absol
PHP背景颜色半透明,html通过css来设置半透明背景
weixin_33730916的博客
03-20 473
Html/Css标签透明度效果的实现,在html中，实现半透明背景，在HTML p+Css编程中，为了实现版透明，通常有3中做法。方法一：第一种是HTML5的透明，在H5中支持透明背景颜色，但遗憾的是，H5中的办透明背景颜色只支持 rgba的写法，不支持16进制的写法如：background-color:rgba(0,152,50,0.7);// -->70%的不透明度 background...
CSS层透明实现方法
09-25
例如，在Safari和Chrome浏览器中，需要添加-moz-前缀，而在Firefox浏览器中，则需要添加-webkit-前缀。在一些老旧的浏览器中，如IE 5.5到IE 8，必须使用filter:alpha(opacity=值);来实现透明效果。 6. 示例代码分析...
CSS 透明度属性
09-25
透明度属性对于网页设计和交互体验有着重要作用，尤其在创建动态效果或者半透明界面时非常有用。 1. `opacity` 属性： `opacity` 是一个标准的CSS属性，它接受0到1之间的小数值，其中0表示完全透明，1表示完全...
IE、FF浏览器下修改标签透明度
09-04
本文将详细讨论如何在不同的浏览器环境下，特别是Internet Explorer（IE）和Firefox（FF）中，使用JavaScript来实现这一功能。 1. **Firefox（FF）浏览器的透明度设置** Firefox浏览器遵循W3C的标准，它支持CSS3中...
chrome下input[type=text]的placeholder不垂直居中的问题解决
09-19 4203
但是在chrome下显示的search word并不能垂直居中。 后来找了很久终于在stackoverflow上找到了对应的方法。 参考：http://stackoverflow.com/questions/4919680/html5-placeholder-css-pa
CSS实现遮盖层
11-16 2589
大部分遮盖层都是通过JS去获取高度和宽度来定位的，而现在采用的大部分是CSS去做，除了一个为了兼容IE6所必要的js。 大致原理就是：让遮盖层的height和width达到100%来去实现，IE6下需要将body的height设为100%才有效。 具体的代码如下： CSS 实现遮盖层 /* the style for layer or mask */ body{_heig
在CSS遮盖层基础上进行弹出层垂直居中
11-17 1674
本篇是继上篇《CSS实现遮盖层》而来。在上一次的基础上加上了弹出层的垂直居中。 需要：1. 弹出层固定高，或者通过js去计算出来的高。 具体实现： 1. 在弹出层处加一层类似遮盖层的包裹；2.设定宽度，这个是必须的。3. 对弹出层使用：margin-left & margin-right: auto; (水平居中)； 4. 对弹出层使用: top: 50%; margin-top: -heig
Chrome and Safari下overflow相关问题
10-12 1542
<br />今天修复一个bug：购物车确认页面在chrome和Safari下出现滚动条的bugfix<br />看了一下代码里面有这么一段话：<br />html{<br />overflow-y: scroll;<br />}<br />但是仅仅设置这句话，overflow-x默认值就应该是visible呀！<br />试了一下加上overflow-x: visible; 依旧有滚动条，这样就排除了不是默认值的可能。<br />后来看了原来是scroll的问题，因为当使用scroll时chrome和Saf
使用simsun来替代css里的宋体写法
08-05 1330
CSS里有一个比较特别的属性：font。也不知道几时开始大家都使用这样一个定义：font-family: ‘宋体’; 但是这样定义后，我们有时就可能出现这样一种情况，我们定义了是宋体字体，但是显示的怎么是别的字体呢？这里说的别的字体主要是ie默认的serif。而样式加载到页面后，
css设置不透明度20%
最新发布
07-29
<think>我们正在处理用户关于CSS opacity设置为20%的问题。 根据引用[1]：使用opacity属性，参数从0到1.0，完全透明是0.0，完全不透明是1.0，参数越小越透明。例如：opacity: 0.2; 表示20%的不透明度（即80%透明）。 引用[2]和[3]也提到了设置背景颜色半透明的方法，但用户明确提到opacity属性，所以我们主要参考引用[1]。 用户的问题：如何设置CSS中的元素不透明度为20%？ 回答：使用CSS的opacity属性，将其值设置为0.2即可。 注意：opacity属性会应用于整个元素，包括其所有子元素。如果只想设置背景颜色透明而不影响子元素，可以考虑使用rgba颜色值（引用[2]和[3]提到的方法），但用户没有特别说明，我们按照opacity来回答。 因此，我们可以这样写： .element { opacity: 0.2; } 同时，为了完整性，我们可以补充说明另一种方法（使用rgba设置背景颜色透明）作为备选，但需明确说明opacity和rgba的区别。 另外，引用[4]提到了一些针对IE的hack，但现代浏览器已经广泛支持opacity和rgba，所以可以忽略，除非用户有兼容性要求。 生成相关问题： 1. opacity和rgba有什么区别？ 2. 如何只让背景透明而文字不透明？ 3. CSS中设置透明度的其他方法？ 现在，我们按照要求组织回答。</think>### CSS 设置元素不透明度为 20% 在 CSS 中，通过 `opacity` 属性可设置元素的不透明度为 20%。具体语法如下： ```css .element { opacity: 0.2; /* 0.2 表示 20% 不透明度 */ } ``` #### 关键说明： 1. **属性值范围** `opacity` 的值范围是 `0.0`（完全透明）到 `1.0`（完全不透明），20% 不透明度对应 `0.2`[^1]。 2. **效果特点** - 设置 `opacity: 0.2` 会使**整个元素（包括内容）** 呈现 20% 不透明（80% 透明）[^1]。 - 若只需背景透明而文字保持不透明，需改用 RGBA 颜色模式（见下文替代方案）。 3. **代码示例** ```html <div class="transparent-box">内容透明度 20%</div> <style> .transparent-box { opacity: 0.2; /* 整体透明度 20% */ background-color: red; width: 200px; height: 100px; } </style> ``` 效果：整个红色区域（含文字）变为半透明状态[^1]。 --- ### 替代方案：仅背景透明（保留文字不透明） 若需仅背景透明，使用 RGBA 颜色值： ```css .element { background-color: rgba(255, 0, 0, 0.2); /* 红底 20% 不透明 */ } ``` - `rgba(红, 绿, 蓝, alpha)` 中 `alpha` 参数控制透明度（`0.2`=20%）[^2][^3]。 - 此方法**不影响内部文字/子元素**的透明度。 --- ### 浏览器兼容性 现代浏览器（Chrome/Firefox/Safari/Edge）均支持 `opacity` 和 RGBA。旧版 IE 需使用滤镜： ```css .element { opacity: 0.2; /* 标准写法 */ filter: alpha(opacity=20); /* IE8 及以下 */ } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值