opacity特殊显示

最新推荐文章于 2022-05-13 23:48:25 发布
最新推荐文章于 2022-05-13 23:48:25 发布
阅读量288 收藏
点赞数 1
分类专栏： uniapp 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a2900678151/article/details/117332356
版权

描述

1.由三层盒子嵌套而成，最外层盒子设置了opacity属性，但是给子盒子再次添加opacity属性时发现子盒子的样式未生效还是透明的；
在这里插入图片描述

原因

子元素会继承父元素的opacity属性，如果子元素单独设置了opacity那么其真正的结果值是子元素与父元素opacity值的乘积
而且opacity的属性值范围是0-1，若父盒子设置了opacity子盒子再怎么设置都会是有透明度的。

解决

在background背景颜色中有个rgba( 40，44，50，0.5)设置，前三项为颜色最后一项是透明度设置，这样在子盒子里就可以设置opacity进行修改子盒子透明度（或者接着用rgba()）

毅哥哥1
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript经典特效---文字特殊显示2.rar
01-04
在"javascript经典特效---文字特殊显示2.rar"这个压缩包中，重点是关于JavaScript实现的文字特殊显示效果。这种效果可以使得网站内容更具吸引力，提高用户体验。 首先，我们要了解JavaScript是如何操作网页中的文本...
图片显示放大缩小旋转透明切换.rar
01-03
3. **图片旋转**：图片旋转涉及到图像的几何变换，可以用于调整图片的方向或创造特殊效果。常见的旋转角度是90度、180度和270度，也可以自由角度旋转。为了保持图片的原始比例，通常需要计算新的图片尺寸。旋转操作...
关于父元素设置opacity后，子元素设置opacity无效问题
sglhp的博客
09-29 2268
问题来源： 最近做一个项目，由于外层p元素字体是半透明的，而内部span元素的字体要求不透明，于是在父元素设置了opacity：0.7，子元素设置opacity：1.0，代码如下。 .detail-top .detail-explain { justify-content: space-between; margin-top: 50px; padding-right: 5%; opacity: 0.7; } .detail-top .detail-explain span { display
css设置背景透明度，而不影响内部元素
popstarqq的博客
05-13 3722
设置DOM元素背景透明度，常用opacity属性，如下效果 <html> <head> <style> .image{ width: 600px; height: 400px; position: relative; background:url('./img_lights.jpg');
css外层透明，内层不透明
weixin_30478619的博客
06-01 545
外层div透明使用：background: rgba(0, 0, 0, 0.5); 内层div透明使用：opacity:1; 这么样就可以了。不要外层使用opacity，会影响内层也透明的。主要是rgba这个。 转载于:https://www.cnblogs.com/xsj1989/p/9121332.html...
css外层DIV半透明内层div不透明-弹出层效果的实现
ai_d_chuan的博客
09-25 2653
css外层DIV半透明内层div不透明-弹出层效果的实现 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt; &amp;lt;title&amp;gt;css外层DIV半透明内层div不透明-弹出层效果的实现【
css:div的不透明度opacity问题（父级的opacity会影响子级）
qq_34169240的博客
02-28 2918
不透明度会作用于整个元素以及它所有的子元素 子元素不透明度=父元素不透明度乘以子元素本身不透明度，而opacity的范围是0~1，所以就算把子级的div的opacity设为1也没有用，子元素是没办法获得大于父元素的不透明度值的。 解决方法： 如果是万不得已视觉排版效果上的需要，可以分别设置两个兄弟元素的不透明度,然后用position的方法将一个放在另一个的上方。...
透明gif的显示
10-23
2. **在HTML中显示透明GIF**：在网页上，可以通过设置`<img>`标签的`transparent`属性或者CSS的`opacity`属性来实现透明GIF的显示。通常，`transparent`属性在现代浏览器中已不再使用，取而代之的是使用CSS控制透明...
cool文字显示特效.rar
03-23
"cool文字显示特效"是一个典型的例子，它可能包含一系列代码、图像或预览文件，用于创建吸引人的文字动画或者特殊展示效果。在本案例中，我们主要关注的是如何在各种平台上实现这些特效。 1. **CSS3动画**: CSS3是...
jquery文本框显示描述文字rar
07-03
例如，可以使用CSS为默认文本添加一种特殊的样式： ```css #description-input::-webkit-input-placeholder { color: #999; opacity: 1; } #description-input:-ms-input-placeholder { color: #999; opacity:...
详解CSS-opacity子元素继承父元素透明度的解决方法
11-19
在写项目页面的过程中，遇到子元素继承父元素透明度的问题，查找了好多文档给出的都是第一种方法，这种方法主要解决简单场景的，而对于设置复杂的background时，该方法不再适用。
css中opacity属性错用导致子元素颜色异常
sumikk的博客
03-30 458
1.opacity的用法总结 作用：设置元素的透明背景 取值： (1) 取值范围0~1 (2) 0表示完全透明，1表示完全不透明 2.误用导致子元素颜色问题 .father { width:100px; height:100px; background-color: #fff; opacity:0.5; padding: 10px; } .son { width:30px; height:30px; back..
关于opacity属性的探究
baidu_39068138的博客
12-16 1281
关于opacity属性的探究 上问题！！ 在前一段时间我朋友和我讨论到了opcaity的属性问题问题如下： 代码如下清重点关注opcaity <!-- css样式 --> <style> .boxfather { width: 500px; height: 500px; background-color: blue; text-align: cen
设置opacity里面的内容也跟着一起透明的解决方法
weixin_45575273的博客
01-18 1276
如果直接给盒子设置opacity，里面的子元素不管opacity设置多少都是会继承外面的透明度，解决办法就是用rgb设置颜色:rgba(250, 250, 250, 0.34)
vue如何通过opacity控制导航栏的动态显隐或其他样式的动画显隐效果
YodgeGGG的博客
12-06 1712
如何通过opacity控制导航栏的动态显隐或其他样式的动画显隐效果 话不多说，先上图 这里两个导航栏分别是不同的组件（我使用的是Vue），但样式原理是一样的，可以用vuex或是父子组件传值的方式来控制v-show的true或false，在点击全屏按钮时，顶部导航栏会向父组件传递一个事件，在父组件进行监听，随后根组件会动态的向两个子组件（两个导航栏）派发当前v-show的值，之后我们通过settimeout函数令v-show这一事件做延迟处理，先让导航栏的opacity即透明度进行一个变化，待透明度完全变为
visibility，display，opacity的区别？
想好了再写！
08-11 3422
相同点： visibility和display都能实现元素的显示和隐藏 display: none; 隐藏元素 display: block; 显示元素 display: inline; 元素转换为行内元素 display: inline-block; 元素转换为行内块元素 visibility:hidden; 隐藏元素 visibility: visible;显示元素 opacity: 0是视觉上消失了，透明度为0，在文档流中站位，浏览器会解析 区别： 1.性能比较 使用visibility:hid
父元素使用opacity将子元素都变透明了的解决方案
wuyou1336的博客
08-29 5889
使用opacity不仅使目标元素的背景变得半透明，而且使它所有的子元素的背景也变成了半透明。这意味着它里面所有的文本、图片也一样都具有同样的透明度，这个效果肯定不是我想要的。 解决办法： 可以用 rgba()解决 : background: raba(x1, x2, x3, y); x1 x2 x3取值是0-255之间的整数，y取值是0-1之间（0，0.1，0.2，0.3，0.4，
实现鼠标移入移出显示隐藏元素
weixin_51780751的博客
01-21 1879
我做了两个方案： 1.css版本（利用opacity） <template> <div class="container" > <table> <thead> <tr> <th>表头</th> </tr> </thead> <tbody> <
某元素设置了opacity，覆盖在它上面的元素怎样不透明
莫宛的博客
10-09 1195
一、问题描述 为某元素设置了opacity:0.4; 覆盖在它顶层的元素也半透明。 二、让下拉部分不透明的方法 position: absolute;background-color:#fff;z-index:10; 三、方法缺陷两元素嵌套情况下的解决办法 仅设置背景半透明，通过rgba()设置。
style="opacity什么意思
最新发布
07-08
使用`opacity`属性可以为元素创建一些特殊的视觉效果，例如实现淡入淡出的动画效果。同时，需要注意的是，设置了`opacity`属性的元素及其子元素也会受到该属性的影响，除非你使用了其他方式来取消或覆盖该效果。 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值