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

最新推荐文章于 2024-05-30 16:04:13 发布
最新推荐文章于 2024-05-30 16:04:13 发布
阅读量986 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css HACK css样式 其他 文章标签： CSS IE6 Filter 背景透明
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Phoebe0549/article/details/9232135
本文介绍了一种在不同浏览器中实现背景透明效果的方法，包括非IE浏览器使用RGBA属性及IE浏览器使用滤镜的方式，并提供了具体的代码示例。

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

以背景黑色，透明度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.youkuaiyun.com/Phoebe0549/article/details/8926825


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

ElementUI - checkbox 复选框背景透明或其他颜色（样式覆盖）
🏆 前端领域优质创作者
05-08 4004
前言 ElementUI 默认为白色背景。 有时候，我们需要一个透明背景的 checkbox 复选框（与背景衔接），如下图所示： 解决方案 注意 <style> 标签添加 lang=“scss”，否则无效。 采用覆盖样式方法，想自定义其他样式都在 .el-checkbox__inner 类中。 .el-checkbox__inner{ background: rgba( #000000, 0)!important;/* 透明 */ /* background:red
HTML设置半透明的背景,CSS设置半透明背景实例详解
weixin_42500739的博客
06-16 3837
CSS设置半透明背景的方法有很多种，我这里根据自己的经验来与大学分享学习常用的CSS设置半透明背景设置方法总结。无图片半透明背景css如果，单纯地用背景色并结合opacity进行设置透明度，那么会出现子元素中的文字也同样出现透明的情况。第二种情况：用png透明度合适的背景图，但这样的话，还得针对IE6进行PNG图片的灰色背景处理。第三种方法：用rgba结合专用hack兼容常规浏览器。Rgba进行背...
修改element中Collapse 折叠面板背景颜色
weixin_68397463的博客
04-08 3907
通过添加样式穿透和!important；一，使用Collapse 折叠面板。
el-select的背景透明和图标颜色修改
weixin_42274795的博客
12-20 8892
修改el-select图标的颜色时查了一下发现很多的文章不起作用，可能是因为我用的scss的原因吧，最后还是修改成功了，记录一下。 下面是el-select相关的代码 <div class="measure-section"> <span class="section-span">时间段：</span> <el-select v-model="type" placeholder="请选择" popper-class="selectFr
el-collapse去除边框；el-table更改背景色
MagicPear的博客
10-26 4003
去除el-collapse折叠面板的默认边框 .el-collapse,.el-collapse-item__wrap { border: none; } 更改el-table表头行跟内容行的背景色 .table td,th{ background-color:#000; } .table thead tr th.is-leaf{ background-color:#000; }
vue3如何去除element-plus组件collapse手风琴效果的边框线折叠面板下边框和修改标题样式颜色字体大小
最新发布
weixin_66071584的博客
05-30 1420
vue3如何去除element-plus组件collapse手风琴效果的边框线折叠面板下边框和修改标题样式颜色字体大小 设置透明就好了，有用的话点个赞谢谢。
背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5为例)
09-25
总之，实现背景透明而文字不透明，同时兼容IE浏览器，可以通过结合使用rgba()函数和IE滤镜来达成。然而，随着浏览器更新迭代，开发者应逐步减少对过时浏览器的依赖，转而采用更先进、更标准的前端技术。
纯CSS实现背景半透明文字不透明效果兼容IE6
09-25
总结起来，要实现背景半透明而文字不透明的效果并兼容IE6，可以结合使用rgba和滤镜属性。首先利用rgba属性为非IE浏览器设置背景透明度，然后对IE6使用DXImageTransform.Microsoft.gradient滤镜，最后通过`:root....
css 背景透明 元素(标签)背景透明的css设计
09-25
需要注意的是，`opacity` 属性会影响元素内的所有内容（包括文字和图片），若只想让背景透明而文字不透明，可以采用层叠样式表（CSS）中的层叠和继承机制，通过将背景和文字放在不同的子元素上来分别控制。...
折叠面板 背景颜色边框色 去除/ 更改
qq_40806920的博客
05-06 3898
.ftaAnalysis .el-collapse-item__header, .ftaAnalysis .el-collapse-item__wrap { background-color: transparent; color: #fff; } .ftaAnalysis .el-collapse, .ftaAnalysis .el-collapse-item__wrap { border: none; }
el-table 设置表格背景色透明
MyOxygen的博客
06-26 6364
记录ElementUI的el-table修改背景色为透明的方法。
el-table设置背景透明(亲试有效)
学如逆水行舟，不进则退，如遇问题联系邮箱：904004593@qq.com
06-24 2万+
众所周知,el-table的背景颜色是白色的,若想重新设置背景颜色 注意: 1.重写样式要加（>>>或者/deep/），不然不会生效 2.th ，tr都有背景颜色，都要重写， 那我们开始,上代码 一.首先在el-table 外加个div 自定义class 如图: <div class="user_skills" style="margin-top:20px;"> <el-table :data="skills" :header-cell-style="getRowCl
el-collapse用法
weixin_45944877的博客
08-04 3784
去除el-collapse折叠面板的默认背景，设置折叠板的箭头放置在右边，折叠面板默认全部展开
ElementUI组件样式修改--表格背景透明，去除下横线（附：组件决定性class名（待整理验证，不完全正确））
得之我幸
10-16 3843
修改elementUi（甚至其他ui组件库）的组件样式
vue+Element【el-collapse】实现任务框的实现与隐藏（点击其他按钮也可隐藏）
不停
08-19 4624
大体效果如下 点击open实现任务框的实现且文本变为close，改造了el-collapse原来的样式 组件原样式 改造后的样式 代码实现 <el-collapse @change="handleChange"> <el-collapse-item :title="context" name="1"> <el-button @click="closePanel">close</el-button>//内部一个close按钮 &lt.
修改elementui默认样式，例如折叠面板修改，el-collapse-item__wrap
热门推荐
qq_41139348的博客
06-26 3万+
刚好有个需求，折叠面板中试用了选项卡，选项卡中有三个数据量不同的表格，为防止切换的时候页面跳动，所以给折叠面板设置一个最小高度min-height。如果直接在外层设置最小高度，那么折叠之后外框依然存在，所以要设置折叠内容区。方法如下： 1.在父元素中写一个类名 2.然后通过f12审查元素找到子级默认样式的类名： 3.为不改变全局样式，使用父级类名加>>>深入符号直...
vue + el-collapse-transition 实现导航菜单 鼠标经过显示和隐藏
梁小茹的博客
07-07 2034
请看： 这是鼠标经过每一个navBar 鼠标经过显示下面的内容以及页面变成透明 主要用到的就是@mouseover @mouseout @mouseenter @mouseleave 通过这四个事件去判断 <template> <div class="top-nav-wrap"> <div class="container"> <div class="nav-contain" style="display: inline-b
一个属性解决Table的边框问题（border-collapse ）
Phoebe的学习天地
03-26 5449
一个属性解决Table的边框问题（border-collapse ）
rgba alpha 透明度的转换计算
Phoebe的学习天地
05-14 4563
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
CSS技巧：实现背景透明与文字不透明的兼容方案
本篇将详细介绍如何通过CSS代码实现背景透明而文字不透明，并保证兼容性支持多种主流浏览器，包括火狐（Firefox）、360浏览器、谷歌（Google Chrome）、以及旧版的微软浏览器（Internet Explorer 6至11）。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

PhoebeSky

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

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

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

打赏作者

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

抵扣说明：

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

余额充值