背景使用opacity设置透明度时，导致字体也出现透明

最新推荐文章于 2025-06-18 09:01:32 发布
最新推荐文章于 2025-06-18 09:01:32 发布
阅读量1.4w 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： web前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gll77/article/details/79713082

解决方法：通过使用background-color：rgba（0 , 0 , 0 , .7），即可解决。


HTML设置半透明的背景,CSS设置半透明背景实例详解
weixin_42500739的博客
06-16 3834
CSS设置半透明背景的方法有很多种，我这里根据自己的经验来与大学分享学习常用的CSS设置半透明背景设置方法总结。无图片半透明背景css如果，单纯地用背景色并结合opacity进行设置透明度，那么会出现子元素中的文字也同样出现透明的情况。第二种情况：用png透明度合适的背景图，但这样的话，还得针对IE6进行PNG图片的灰色背景处理。第三种方法：用rgba结合专用hack兼容常规浏览器。Rgba进行背...
IE下打开ClearType后透明字体问题的解决方法
09-22
当在IE浏览器中启用ClearType后，某些网页中的透明元素（如设置了半透明度的`<div>`等）可能会出现字体模糊、边缘不清晰的问题。这是因为在IE浏览器中，当对元素应用了透明效果时，如果没有正确处理背景色，...
css设置了透明背景，字也被透明了
yanyan13840132的博客
12-09 2499
css设置了透明背景，字也被透明了
opacity文字也透明解决方式，border与outline对于按钮来说区别
weixin_43907110的博客
02-01 645
background-color：black； opacity：0.2 这种透明方式会使盒子内的文字一起变透明为了只使增加透明度可以改为如下写法 background-color: rgba(29,29,29,0.2); rgba内的是相应颜色转换过来的可以，不知道可以百度在线工具进行转换 对于button来说border是未点击前的边框outline是点击后的边框 ...
Background项目中的透明度设置优化：从反向逻辑到正向设计的演进
最新发布
gitblog_07903的博客
06-18 379
Background项目中的透明度设置优化：从反向逻辑到正向设计的演进 背景与问题分析 在KatsuteDev的Background项目中，透明度(opacity)设置一直采用了一种与传统设计理念相悖的实现方式。大多数图形界面和图像处理软件中，透明度值通常直接表示元素的透明程度——0表示完全透明，1表示完全不透明。然而Background项目却采用了相反的逻辑，将设置值作为"1-透明度&...
react-native背景使用opacity设置透明度，字体也透明问题
King_City的博客
06-22 7894
当在View的样式中使用opacity设置透明体时，View中Text的字体颜色也会跟着透明。 解决方案： 使用 rabg来解决 例如: rabg(0,0,0,0.1) 例子 example: { background: ‘#ffffff’, opacity: 0.1 } 若使用上面样式 字体也会透明 则使用下面这种写法可解决 example: { background: rgba(255,255,255,0.1) } ...
CSS的opacity设置背景透明，字体不透明
qq_52070860的博客
04-24 5748
opacity属性会使子元素也生效，而且子元素再设置opacity：1；是没有作用的； <body> <div class="demo"> <div class="a">woshi213sdfdf</div> </div> </body> <style> .demo { background-color: burlywood; opacity: 0.5; }
设置opacity里面的内容也跟着一起透明的解决方法
weixin_45575273的博客
01-18 1421
如果直接给盒子设置opacity，里面的子元素不管opacity设置多少都是会继承外面的透明度，解决办法就是用rgb设置颜色:rgba(250, 250, 250, 0.34)
vscode背景图片字体变透明
03-14
如果不想依赖额外插件，则可以直接对准备使用的背景图片进行预处理——降低其自身的不透明度后再导入至编辑器中作为壁纸使用。这样做的好处在于无需更改任何软件内部参数即可达到理想状态[^2]。 对于希望进一步提升...
C# TextBox 控件透明
04-01
在WPF中，透明度可以通过设置`Opacity`属性实现，而透明背景则可以使用`Background`属性设置为`Transparent`： ```xml <TextBox Opacity="0.5" Background="Transparent" /> ``` 或者在C#代码中设置： ```csharp ...
实现form透明窗体的字体正常显示技术
在.NET开发环境中，可以通过设置窗体的Opacity属性来控制窗体的透明度： ```csharp // 设置窗体透明度，其中0.0表示完全透明，1.0表示完全不透明 this.Opacity = 0.5; ``` 另外，如果需要对窗体的某一部分进行...
关于CSS中opacity改变透明度问题
qq_41988415的博客
05-13 896
我们如果在写背景样式时直接使用opacity，会造成背景和其文字全部透明，例如如下代码： .div1 { width: 100px; height: 60px; background-color: #a4f3c0; opacity: 0.3; font-size: 30px; } <div class="div1"> hello </div> 效果图如下 可以看出，直接使用opacity会使文字和背景全部改变透明度。 解决
解决div设置opacity后，其中的内容也随之透明化
qq_44731369的博客
08-25 4339
今天做练习，本来想实现这个效果： 没想到，它居然变成了这样： 嗯？本想用opacity来控制div背景色透明度，可这文字也变透明了，并不是我想要的效果，这是被同化了？ 其实，解决方法并不难，只需一行代码就搞定了： background: rgba(255, 255, 255, 0.2);（最后的值为关键） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m
css实现背景透明文字不透明
华仔而立的博客
04-07 1558
css实现背景透明文字不透明 设置元素的透明度： -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明 但是当我们对一个标签设置背景的透明度时，往往我们并不希望该标签上的文字图片也变成半透明了。 例如： <div><p>不透明</p></div>div{-moz-opacity:0.3;f
CSS实现背景透明，文字不透明（兼容各浏览器）
热门推荐
永无止境的专栏
03-21 1万+
在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明，而文字保持不透明。而IE6/7/8浏览器不支持rgba，只有使用IE的专属滤镜filter:Alpha来实现，但是这样写法会把文字也变为透明，因此只有在透明容器的子节点（文本节点除外）内设置position:relative才能不继承其父元素的透明滤镜，代码如下： DOCTY
css设置背景半透明，文字不透明效果
chili_fan的博客
06-21 5190
设置背景半透明，文字不透明效果 一、常见的错误做法 最常见的做法就是： 1.设置元素的opacity,这种设置出来的效果就是内容与背景都是半透明的，严重影响视觉效果。 2.设置background-color:rgba(),这种方式只能设置背景颜色的透明度。 二、正确做法 有两种方法，原理相同：都是要增加一个新盒子，定位到它的上面去。 1.利用伪元素::before,我们通过给伪元素添加透明背景并且定位到元素中。 .demo { width: 300px;
如何实现背景/背景图片透明文字不透明
assassinator_567的博客
02-27 1441
第一种情况背景为自定义颜色： 直接给父级背景颜色设置background:rgba();就可以了； <!-- 第一种情况 背景是自定义颜色系列 --> <div class="container"> <div class="bg"> <div class="form"> <div class="formItem"&g......
背景透明，文字不透明的兼容处理
关注我！带你一路 "狂飙" 到底！
09-15 1107
我们在做PC端项目的时候，常常会碰到透明背景和透明图片的的需求，但是透明度常常有会发生很多问题，特别是背景透明内容不透明，想要兼容所有浏览器实现起来就比较麻烦。其实平时说的调整透明度，其实是在样式中调整不透明度，如下图：打开ps，在图层面板上，可以看到设置-图层调整 不透明度的菜单，从 0% （完全透明）到 100%（不透明）实现透明的css样式通常有以下3种方式，以下是不透明度都为50%的写法valuealphavalue。
CSS实现背景图片透明文字不透明效果的两种方法
ymz641的专栏
04-11 1万+
网页设计中经常要在背景图上放一些文字介绍，这就需要背景图片能有透明效果以便突出显示文字信息，经多方查阅，终于找到了2种有趣的方法。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值