CSS 透明，文字不透明处理

最新推荐文章于 2023-03-23 10:29:49 发布
最新推荐文章于 2023-03-23 10:29:49 发布
阅读量196 收藏 1
点赞数
分类专栏： 问题杂记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41066950/article/details/117446848
版权

1.opacity：会使其所有子元素都透明

我们通常是使用 opacity来做背景的透明化处理，该属性被所有浏览器支持，可以大胆使用，透明度从0.0(完全透明)到1.0(完全不透明)，但该方法会使其所有子元素都透明，此时若只想让背景透明，其他不透明，则可以使用rgba处理背景

2.使用rgba(255,255,255,0.2)

黑夜寒冬的将士
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何用CSS让背景有透明度而内容不受影响
艾丽的博客
03-04 1995
效果图如下所示： 具体思路： 因为设置完背景之后，再使用opacity属性设置透明度会影响其上方的内容，导致上方内容也会产生透明的效果。 所以，需要将背景单独设置一个层，并和文字所在的层重叠且居于其下即可。 注意：两个层的大小要保持一致。 具体实现代码如下所示： <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body {
css设置导航栏透明度时，不影响文字透明度的方法。
m0_49608552的博客
07-30 3155
css设置导航栏透明度时，不影响文字透明度的方法。使用rgb表示：background-color:rgb(0,0,0,0.5)
css 实现背景图片透明文字不透明
weixin_62312817的博客
03-23 1088
css实现背景色透明可以用rgba直接设置背景颜色，背景色透明但是文字不会受影响。但是现在变成了背景图片，就没法用了。注意： 伪元素要搭配position定位使用 我前面用了display定位注释掉了，不然z-index不起作用。opacity: 透明度来设置 ，哎呀，背景图片变透明了，但是文字也一起透明，很不好看。::before伪元素 设置。
CSS中如何实现背景图片透明并且固定和文字不透明效果
热门推荐
qq_56924476的博客
08-01 1万+
设置背景图片的透明度，并且该背景图片不随鼠标滚动而移动，我们可以使用滤镜filter中的透明度设置opacity 至于opacity的作用:转化图像的透明程度。值定义转换的比例：值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。 <body>里面不能直接设置图片的透明度，需要借助<div
css 透明背景_css容易使人蒙圈的几个经典问题
weixin_39639622的博客
11-20 404
本文摘自这一年来自己在工作中经历的几个比较好的CSS问题(不一定复杂，但个人觉得都挺值得一说)，这些CSS问题平时很少遇到，即使遇到后也不一定知道解决方案，即使知道解决方案也不一定知道产生的原理，同时也准备了2个JS问题，希望帮到各位朋友。期待您的点赞，谢谢。一、CSS篇1.1 元素默认蓝色边框input标签元素(如button、text 、areatext)的一些事件(如click、focus等...
css设置背景透明度 不影响其他文字图片
weixin_41983443的博客
07-12 3763
CSS篇欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编
CSS代码实现背景透明而文字不透明
04-30
总的来说，实现CSS背景透明而文字不透明的方法有多种，关键在于理解各种CSS属性和技巧的兼容性，以及如何根据浏览器特性选择合适的方法。通过灵活运用 rgba()、opacity、filter 和渐变等工具，我们可以创建出既美观...
CSS3实现背景透明文字不透明的示例代码
09-24
这种方式避免了使用`opacity`属性导致的文字和背景一起变模糊的问题，实现了背景透明文字不透明的效果。 总的来说，CSS3提供了丰富的透明效果处理方式，比如`rgba()`和`filter`，使得我们可以更精确地控制元素的...
css实现背景半透明文字不透明的效果示例
09-24
总结来说，通过CSS的`rgba()`函数和合理的颜色搭配，我们可以轻松实现背景半透明而文字不透明的效果。在实际应用中，可以根据需求调整颜色值和透明度，以适应不同的设计风格和品牌要求。同时，保持良好的代码习惯，...
纯CSS实现背景半透明文字不透明效果兼容IE6
09-25
在某些情况下可能会需要背景半透明文字不透明这样的效果，实现起来并不复杂，通过滤镜便可做到，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助
CSS实现背景图片透明而文字不透明效果的两种方法
12-13
摘要: 方法一(毛玻璃效果)：背景图 + 伪类 + flite:blur(3px) 方法二(半透明效果)：背景图 + 定位 + background:rgba(255,255,255,0.3) CSS实现背景图片透明，文字不透明效果的两种方法 项目中经常会用到背景图上放一些文字介绍，这里介绍两种技术来实现背景图片透明，文字不透明效果，记录一下，方便日后学习。 1.毛玻璃效果： 背景图 + 伪类 + flite:blur(3px) .demo1{ width: 500px; height: 300px; line-height: 50px; text-alig
CSS设置背景透明度，不影响内部元素
ssjjrr的博客
02-04 2622
CSS设置背景透明度，不影响内部元素
Vant组件样式穿透实录
UserWu1001的博客
09-01 2005
项目场景： 实际使用vant环形图组件，需要适配红色调整体设计风格，修改源文件未生效，原类覆盖也没有生效最终使用 /deep/解决了问题，特此记录，分享。 问题描述： 期望修改css样式中的font-size属性为 12px (0.32rem) 期望修改css样式中的color属性为 #E54E55 .van-circle__text { position: absolute; top: 50%; left: 0; box-sizing: border-box; w
css实现背景透明，文字不透明的两种方法
全栈开发
03-25 1065
兼容各浏览器且效果一致。设置元素的透明度： -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明例如： <div><p>不透明</p></div> div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;width:500p
css文字不透明度怎么设置？
高先生的猫
06-25 2454
在css中有很多好看的样式都可以实现，css设置出来的样式让整个网页看起来也会非常美观，今天的这篇文章就给大家来介绍一下在css中怎么设置文字的透明度，让你的文字在网页中看起来是透明的。 CSS设置透明度可用如下两类方法实现： 1、使用rgba 2、使用opacity 使用rgba设置文字不透明度的方法示例： <!DOCTYPE html> <html> <head> <title></title> <style t
css设置背景透明度，而不影响内部元素
popstarqq的博客
05-13 3713
设置DOM元素背景透明度，常用opacity属性，如下效果 <html> <head> <style> .image{ width: 600px; height: 400px; position: relative; background:url('./img_lights.jpg');
css背景透明文子不透明,CSS 实现背景透明 内容文字不透明 显示
weixin_29830833的博客
08-03 443
思路主要是IE9+ 谷歌 火狐等使用rgba(0,0,0,0.5)来确定透明度 前三个值是RGB值 可以直接参考PS里对应的值 最后一个是透明度例子 background：rgba(255,255,255,0.5);然后去兼容IE6-IE8ie6-ie8使用hack@media screen\,screen9{.bg_opacity{background:rgb(255,255,255);//或...
css如何实现背景透明，文字不透明？
weixin_30493401的博客
10-16 1062
之前做了个半透明弹层，但设置背景半透明时，子元素包含的字体及其它元素也都变成了半透明。对opacity这个属性认识的不透彻，在这里做一些总结，方便以后使用。 背景透明，文字不透明的解决方法： 为元素添加一个绝对定位的子元素，设置大小和该元素一样，把半透明加在绝对定位元素上作为遮罩，z-index设置到最底部，达到背景半透明效果。 使用CSS3新属性rgba。 ...
CSS设置背景色透明字体不透明
weixin_42510217的博客
03-18 8135
CSS怎么设置背景色透明字体不透明 最近在学习.NET web应用开发，学习HTML静态页面时想做一个半透明的背景色，像以下效果： 发现用opacity设置背景颜色透明度时连同其div内所有图片及其字体颜色都变透明了。 opacity设置半透明CSS代码如下： .bodytop{ width:100%; height:100px; text-align:center; ...
css实现背景透明，文字不透明
最新发布
04-14
可以使用CSS中的opacity属性来实现文字不透明，背景透明的效果。 例如： ``` div { background-color: rgba(255, 255, 255, 0.5); /* 背景颜色设置为半透明白色 */ opacity: 0.8; /* 设置文字不透明度为0.8 */ }...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值