解决opacticy让背景和文本都透明

最新推荐文章于 2023-03-19 11:45:16 发布
最新推荐文章于 2023-03-19 11:45:16 发布
阅读量355 收藏
点赞数
分类专栏： 项目 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30351747/article/details/117963400
版权
本文介绍了两种替代opacity的方法来实现背景和文本的透明效果。第一种是使用rgba()函数设定背景颜色，保留文本清晰。第二种方法是通过创建两个div，一个作为带透明背景的层，另一个放置文本，利用z-index调整层级。这种方法可以独立控制背景和文本的透明度。
摘要由CSDN通过智能技术生成

解决opacticy让背景和文本都透明

1、不使用opacity，使用以下方式透明

background-color: rgba(0,0,0,.65);

2、用两个div，一个设置opacity做背景，另一个放文本，将背景使用z-index提一下层级。

Mr.Meng_95
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css： opacity、transparent、rgba 区别
lryh_的博客
01-20 1301
opacity、transparent、rgba 区别
SVG渐变动画实现
weixin_43805971的博客
06-19 1252
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Deom SVG!</title> </head> <style> #pink{ width: 582px; height: 383px; position: absolute; left: 8px; background: url(https:/
opacity设置元素背景透明
weixin_43269800的博客
01-03 501
opacity 可选值 0-1； 0 表示完全透明 1 表示完成不透明 注意：opacity属性在ie8及一下的浏览器不支持 filter 属性值：alpha（opacity=0） 属性值范围：0~100 0：表示完全透明 100：表示完全不透明 注意：这种方式支持ie6，但一般浏览器模拟器无法测试。 兼容写法： opacity: 0; filter: alpha(opacity=0); ...
css怎么可以只让背景透明 文字不透明
no_difficulty的博客
10-13 7058
单色背景 可以不使用opacity属性，而是使用rgba函数 ex： &amp;lt;div style=&quot;background-color:rgba(0,0,0,0.5)&quot;&amp;gt;背景是透明度0.5的黑色，文字不透明&amp;lt;/div&amp;gt; 图片做背景 将图片跟文字设置成兄弟关系，对图片设置opacity属性，把文字设置成绝对定位，然后将其定位到图片上 &amp;lt;div style=&amp
opacity文字也透明解决方式，border与outline对于按钮来说区别
weixin_43907110的博客
02-01 567
background-color：black； opacity：0.2 这种透明方式会使盒子内的文字一起变透明为了只使增加透明度可以改为如下写法 background-color: rgba(29,29,29,0.2); rgba内的是相应颜色转换过来的可以，不知道可以百度在线工具进行转换 对于button来说border是未点击前的边框outline是点击后的边框 ...
设置透明
weixin_45736498的博客
03-11 199
设置元素怒透明（opacty） opacty可以用来设置元素的背景的透明，他需要一个0-1的值， 0表示完全透明 1表示不透明 兼容新问题： opacty属性在IE8中不支持使用在IE8以下使用alpha(opactiy=透明度)； 透明度0~100； 其他设置透明的方法： 在设置背景颜色时在可以在其后面加上一个0~100的值来设置透明度 #login-box{ width: 30...
圆环自定义样式（百分比）
专栏
07-01 122
option = { legend: { show: false }, series: [ { type: "pie", radius: [0, 0], silent: true, label: { normal: {...
RGBA: 了解
sunlight_01的博客
05-24 2882
RGBA: 了解 rgba（0，0，0，0）四个值，前三个值的范围是0~255之间的整数或0-100的百分数 前三个值，描述的是三原色，最后一个则代表透明度选值在0~1之间： 0 表完全透明 0.5 表板透明 1 表完全不透明的rgba ...
RGBA(0,0,0,0)调色
热门推荐
小夜丶凝眸的博客
08-04 4万+
      前三个值（红绿蓝）的范围为0到255之间的整数或者0%到100%之间的百分数。这些值描述了红绿蓝三原色在预期色彩中的量。第四个值，alpha值，制定了色彩的透明度/不透明度，它的范围为0.0到1.0之间,0.5为半透明。比如，如果你想要纯粹的红色作为背景色，你就可以设置为100%红，0%绿和0%蓝。      rgba(255, 255, 255, 0)则表示完全透明的白色     ...
盒子阴影透明度的设置为什么不能用opacity设置？
最新发布
Z0116_的博客
03-19 319
在这题中我们需要的是透明度，所以在rgba中设置所需要的透明度即可。首先要了解，不能用opacity这个属性设置并不是说没效果用不了，而是当你使用这个元素去设置一个盒子阴影的透明度的时候，效果不仅会呈现在父元素上，子元素也会被继承下来。
visibility & display & opacity
繁华是瑾的博客
07-19 271
首语： visibility,display,opacticy三种css属性都有让元素‘消失’的特性；但是三者在本质上还是有区别的     visibility:hidden display:none opacity:0 页面空间 占据 不占据 占据 能否点击(意味着能否触发方法) 不能 不能 能 后台元素 消失 ...
解决div设置opacity后，其中的内容也随之透明化
qq_44731369的博客
08-25 3733
今天做练习，本来想实现这个效果： 没想到，它居然变成了这样： 嗯？本想用opacity来控制div背景色透明度，可这文字也变透明了，并不是我想要的效果，这是被同化了？ 其实，解决方法并不难，只需一行代码就搞定了： background: rgba(255, 255, 255, 0.2);（最后的值为关键） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m
设置opacity里面的内容也跟着一起透明的解决方法
weixin_45575273的博客
01-18 1328
如果直接给盒子设置opacity，里面的子元素不管opacity设置多少都是会继承外面的透明度，解决办法就是用rgb设置颜色:rgba(250, 250, 250, 0.34)
关于CSS中opacity改变透明度问题
qq_41988415的博客
05-13 817
我们如果在写背景样式时直接使用opacity，会造成背景和其文字全部透明，例如如下代码： .div1 { width: 100px; height: 60px; background-color: #a4f3c0; opacity: 0.3; font-size: 30px; } <div class="div1"> hello </div> 效果图如下 可以看出，直接使用opacity会使文字和背景全部改变透明度。 解决
css设置导航栏透明度时，不影响文字透明度的方法。
m0_49608552的博客
07-30 3263
css设置导航栏透明度时，不影响文字透明度的方法。使用rgb表示：background-color:rgb(0,0,0,0.5)
opacity背景层透明导致文字也透明
weixin_33985679的博客
02-24 1692
如果想要文字和背景分开，即背景透明了，但是文字不影响 解决方法：高级浏览器用background:rgba();来解决 低级浏览器，给文字层加相对定位 http://www.360doc.com/content/13/0802/13/203871_304249004.shtml 转载于:https://www.cnblogs.com/zhangwenkan/p/5213379.html...
背景透明文字透明、背景透明文字不透明的实现方法
qq_45863496的博客
11-16 691
背景透明文字透明 css样式代码： 主要看：.table-box .tr .td-lable 设置css的透明属性opacity即可 .table-box { width: 900px; height: 150px; border: 1px solid #CCCCCC; margin-top: 21px; } .table-box .tr {
Qt设置窗体的透明度： setWindowOpacity（）
好儿郎~志在四方
06-04 1万+
Qt中设置窗体透明度的方法。
03 div设置opacity透明度之后，发现里面的内容也随之生效的解决方法
X北辰北的博客
12-19 2601
问题描述 今天在项目中想实现如下一个样式： 然后就给底层这个div设置了背景色和opacity属性来控制透明度，但是发现里面的文字也有了透明度，就变得很难看。我们最终想要的效果可是仅仅这个底层的div有透明效果，里面的文字是没有这效果的，那接下来我们就看看该怎么做。 解决方法 嘿嘿，其实很简单，我们设置背景色的时候只需要用rgba的方式去设置就好了，如下所示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值