关于背景透明，文字不透明的最佳方法，兼容IE

最新推荐文章于 2020-10-16 11:34:44 发布
最新推荐文章于 2020-10-16 11:34:44 发布
阅读量922 收藏
点赞数
分类专栏： css HACK css样式 其他 文章标签： CSS IE6 Filter 背景透明
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Phoebe0549/article/details/9232135
版权
css样式 同时被 3 个专栏收录
20 篇文章 0 订阅
订阅专栏
其他
10 篇文章 0 订阅
订阅专栏
css HACK
9 篇文章 0 订阅
订阅专栏

以背景黑色，透明度0.5举例


非IE：background:rgba(0,0,0,0.5);

IE： filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);



PS：#7f000000  其中7f是透明度0.5转换成16进制的数值，000000是黑色的16进制数值

具体数值转换可以参考 http://blog.csdn.net/Phoebe0549/article/details/8926825


我个人认为这个写法是最好的，无需单独定义背景层，代码精简，本人一直在用，兼容IE6，有更好的解决办法，欢迎留言探讨

PhoebeSky
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
rgba alpha 透明度的转换计算
Phoebe的学习天地
05-14 4389
rgba 和IE下filter数值的转换 rgba 透明值 IEfilter值 0.1 19 0.2 33 0.3 4C 0.4 66 0.5 7F 0.6 99 0.7 B2 0.8 C8 0.9 E5
ElementUI - checkbox 复选框背景透明或其他颜色（样式覆盖）
王佳斌
05-08 3771
前言 ElementUI 默认为白色背景。 有时候，我们需要一个透明背景的 checkbox 复选框（与背景衔接），如下图所示： 解决方案 注意 <style> 标签添加 lang=“scss”，否则无效。 采用覆盖样式方法，想自定义其他样式都在 .el-checkbox__inner 类中。 .el-checkbox__inner{ background: rgba( #000000, 0)!important;/* 透明 */ /* background:red
ElementUI组件样式修改--表格背景透明，去除下横线（附：组件决定性class名（待整理验证，不完全正确））
得之我幸
10-16 3653
修改elementUi（甚至其他ui组件库）的组件样式
一个属性解决Table的边框问题（border-collapse ）
Phoebe的学习天地
03-26 5280
一个属性解决Table的边框问题（border-collapse ）
关于font：14px/25px Arial 的所表达的意思
Phoebe的学习天地
01-08 2784
关于font：14px/25px Arial 的所表达的意思 其中14px表示字体大小；25px表示行高
chrome、firefox、IE 处理input 光标的区别
Phoebe的学习天地
05-21 1864
浏览器中input输入光标位置错位详解 在工作中遇到的问题，尝试着找找解决方法，还真有呢！记下来方便自己方便他人吧 以前在项目里碰到过一个问题 input输入框用一个背景图模拟，设置height和line-height一样的高度，使里面的输入文字能够居中， 在FF下出现的情况是：点击input时，输入光标其实上跟input的height一样高，但当开始输入文字时，光标又变得跟文字
css透明---css样式之美
Phoebe的学习天地
05-21 1585
纯CSS3透明水晶盒 标签：css3 & 变换 & 投影 & 透明 & 阴影 相信大家有看过这个例子：3D盒子，在书《CSS3 实战》上第282页有个综合实战“设计动态立体盒子”的例子，实现方式跟它一样，我的盒子也是以它为原型来设计的，不过在实现方面有做修改、优化，以及增添了一些细节，下面是我的盒子Firefox截图： 透明化了盒子，通透性强了，因为透明了，所以背部
CSS命名规范和规则
Phoebe的学习天地
11-14 1094
css命名规范，一些准则
关于文字超出用省略号显示text-overflow:ellipsis
Phoebe的学习天地
12-12 1033
文字超出 隐藏 用省略号显示
ie6不兼容input[type="text"]的样式写法
Phoebe的学习天地
04-12 1029
什么时候可以完全忽略IE6啊，我就解脱了 input[type="text"]{ height：30px; border:1px solid #ccc;width:100px} 这样写的样式IE6都不支持 折磨了我好久啊，找不到原因，经过了不知道多少次的测试终于发现原来如此 IE6就不能用一点智能的新技术
关于a标签的虚线问题
Phoebe的学习天地
04-11 945
之前也遇到过这个问题，忘记是怎么解决了，这个问题再次出现时，还得现找，这个是经过测试没问题的解决办法，有需要的童鞋可以试试 如果所有的a标签可以直接都需要，直接加载css样式里就可以： a {outline: none;} a:active {star:expression(this.onFocus=this.blur());} :focus { outline:0; }
详解CSS选择器、优先级与匹配原理
Phoebe的学习天地
08-01 913
作为一个Web开发者，掌握必要的前台技术也是很重要的，特别是在遇到一些实际问题的时候。这里给大家列举一个例子： 给一个p标签增加一个类（class），可是执行后该class中的有些属性并没有起作用。通过Firebug查看，发现没有起作用的属性被覆盖了。这个时候突然意识到了CSS选择器的优先级问题，这里就CSS选择器的优先级问题做了一些总结。 51CTO推荐阅读：巧妙地使用CSS选择器 选择器
什么时候使用CSS与Table
Phoebe的学习天地
05-21 801
TW的正文页之前为了考虑小显示器小风辨率的用户，宽度用了 850px，现在用大分辨率的用户越来越多，为了跟首页统一，都要改成950px。因为2年前做页面的时候就用了CSS布局，所以，虽然正文页有几十万个页面，但只修改了一个css文件和几个相关的图片，就都变了。如果当初用了table布局，后果不不堪设想….. 早几年，网上曾兴起过CSS布局和Table布局的争论，一部分人不以为然，认为css只不过
Firefox CSS私有属性备忘记录
Phoebe的学习天地
05-21 759
有时..有些东西Firefox 总是支持不好.只能找私有属性来帮忙.例子还没做,因为太多太不了解了,等理解得差不多时搞成本电子书.虽然这些不推荐使用,可是万不得以的时候总得有个解决的方法.. 以下是引用片段： 　　At-rules 　　@-moz-document url(http://www.w3.org/), 　　url-prefix(http://www.w3.org
一个sprite很好用的网站
Phoebe的学习天地
06-06 746
Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Then, click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of
Chrome下字体显示不能小于12px的解决方法
Phoebe的学习天地
11-19 593
今天工作的时候，发现的一个问题，于是在网上查找相关信息，还真是有解决办法呢，亲自试过了好使 添加一个webkit的私有属性： .class{-webkit-text-size-adjust:none;} 不建议使用全局属性： html{-webkit-text-size-adjust:none;} 而是有针对性的对我们需要定义字体小于12px的地方去使用这个webki
AuthBWC-0.3.3-py3-none-any.whl.zip
08-07
AuthBWC-0.3.3-py3-none-any.whl.zip
音视频剪辑库moviepy及其应用
最新发布
08-07
一些用moviepy库处理编辑视频的代码。主要包括：视频与视频之间的格式转换、视频提取音频、文本/颜色/遮罩剪辑、混剪、文字/转场切换特效及其与matplotlib、numpy创建动画的一些简单例子。
CSS实现背景图片透明文字不透明效果的两种方法
05-30
方法一：使用CSS3中的background-clip和text-fill-...然后，使用mix-blend-mode属性将遮罩与背景图片混合，实现背景图片透明的效果。最后，将文本的z-index属性设置为1，使其显示在遮罩层之上，达到不透明的文本效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

PhoebeSky

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值