css 透明_使用CSS的opacity属性设置透明度时踩坑

最新推荐文章于 2021-09-13 22:11:49 发布
最新推荐文章于 2021-09-13 22:11:49 发布
阅读量331 收藏
点赞数 1
文章标签： css 透明 css 透明度 css透明度 div背景透明 div隐藏与显示属性

opacity

使用CSS的opacity属性设置透明度时踩坑：

如果父元素有opacity属性，那么无论如何，子元素都会继承这个属性，

.

f78677a25aa3ff570c2fd5bc5acf7823.png

即便加上 !important 也无济于事

除非，子元素的opacity值小于父元素才能生效

.

f7cc10e04f31a7a489a508999c7e3329.png

只能比父元素更透明

解决办法：使用rgba的a值来设置透明度

.

6a80cc84831ebf93a71044e7781b244d.png
weixin_39937635
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
父元素opacity属性对子元素的影响(子元素设置opacity无效)
xiongshiyuan的博客
08-18 5454
问题来源于实践 这段时间做了一个项目优化，对于原有的内容进行了重新设计实现，其中一项就是对于label标签添加hover层进行解释说明，最常用的办法及时label的容器设置relative，然后hover层作为它的子元素设置absolute，然后在使用label的hover伪类来控制hover层的显示和隐藏，这其中一个要求及时hover层必定要求能够遮住页面中其他的元素，所以最常用的办法是设置它...
关于遮罩层+自定义弹出框的实现，透明度设置，子元素opacity不生效（不符合预期）问题的一点总结
lingliu0824的博客
08-16 3227
我们可能想要的到这样的效果
CSS中的opacity，不透明度的坑
weixin_30399797的博客
11-09 352
opacity的用法示例如下 /* 值是0到1之间的数值 */ opacity:0.5 opacity设置在元素上的时候，会出现什么效果？ 答曰：如果不设置opacity的话，会显示效果为A（可以理解为一个图片），将A按照opacity设置的不透明度，就是得到的最终效果B。效果之间从最内侧开始推。 举例： 1 <div class="box1">...
比较opacity:0、visibility:hidden、display:none，优劣和适用场景
Menqq的博客
03-16 1193
display: none DOM 结构：浏览器不会渲染 display 属性为 none 的元素，会让元素完全从渲染树中消失，渲染的时候不占据任何空间； 事件监听：无法进行 DOM 事件监听，不能点击； 性能：修改元素会造成文档回流（reflow 与 repaint）,读屏器不会读取display: none元素内容，性能消耗较大； 继承：是非继承属性，由于元素从渲染树消失，造成子孙节点消失，即使修改子孙节点属性子孙节点也无法显示，毕竟子类也不会被渲染； 场景：显示出原来这里不存在的结构； tran..
html5隐藏占位置,CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析...
weixin_32715349的博客
06-03 1006
说明opacity 用来设置透明度display 定义建立布局时元素生成的显示框类型visibility 用来设置元素是否可见。opacity、visibility、display 这三个属性分别取值 0、hidden、none 都能使元素在页面上看不见，但是他们在方方面面都还是有区别的。是否占据页面空间举个例子.yellow{width:100px;height:100px;background...
详解CSS3的opacity属性设置透明效果的用法
01-21
早期网页设计常常会用到许多的透明效果，通常都是透过 png 图层来制作透明的感觉，现在网页设计师可以使用 CSS3 opacity 属性来轻松的达到网页元素不透明度的调整，CSS3 opacity 属性的语法非常简单，只需要透过数字...
详解css透明度之rgba和opacity的区别及兼容
09-22
在CSS中，设置元素透明度有两种主要方法：rgba和opacity。两者都能达到让元素变得半透明的效果，但在使用上存在一些关键的区别。 首先，我们来看opacity属性。opacity属性用于设置整个元素（包括其内容和子元素）的...
css中使用rgba和opacity设置透明度的区别（附图）
09-24
在CSS中，设置元素透明度的方法主要有两种：RGBA和opacity。两者都能实现透明效果，但它们之间存在一些关键差异，这些差异在实际开发中需要特别注意。 1. RGBA（Red, Green, Blue, Alpha） RGBA颜色值允许我们指定...
CSS3中的Opacity多浏览器透明度兼容性问题
09-24
在CSS3中，`opacity`属性用于设置元素的透明度，允许你控制元素及其所有子元素的不透明度。这是一个非常有用的功能，但遗憾的是，并非所有浏览器都原生支持CSS3，尤其是较早的版本。这就导致了在不同浏览器间实现...
css透明度的设置 opacity
静下心来写代码
05-31 1198
.class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }
CSS布局flex、position、display、visibility、opacity分析
小帅の技术博客
09-13 563
flex:1 解析 可以实现均分外层容器空间的效果。 flex 是 flex-grow，flex-shrink，flex-basis 三个属性值的缩写 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; flex-grow flex-grow用于设置各item项按对应比例划分剩余空间，若flex中没有指定flex-grow,则相当于设置了flex-grow:1 flex-shrink flex-shrink用于设置item的总和超出容器空间时，
前端----CSS透明度属性opacity
热门推荐
nO0b
09-24 1万+
指定透明度的属性是opacity,属性值从 0.0 到 1.0。值越小，越透明。 img{ opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */ } IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。 IE8 以及更早的版本使用滤镜 filter...
CSS opacity设置透明度影响子元素的解决办法
immocha的博客
12-27 2616
当我们设置一个元素 .item { opacity:0.5 } 其内部的opacity为1的子元素也同时具有了0.5的透明度 解决办法 .item { background: rgba(0,0,0,0.3) } 这样设置就不会影响子元素了。 ...
opacity(透明度)属性设置
weixin_30347335的博客
12-04 1412
1、opacity:是属性，整个元素包含子元素全部都会透明，取值范围0-1; 2、background-color：rgba（0,0,0，.5）rgba是值，用于背景，取值范围0-1。 补充：a-alpha=透明度通道 实例： 1 div{ 2 width: 200px; 3 height: 200px; 4 border: 1px solid red; 5 backg...
CSS的坑（2）之透明度属性
weixin_44334581的博客
03-01 420
在我们设置背景色透明的时候经常用到opacity属性，它非常方便的可以设置背景透明度可以设置从0（不显示）到默认值1的数值。 opacity属性实现 HTML <div class="box1"> <div class="box2"></div> <span>我变透明了</span> </div> CSS ...
css 设置背景颜色透明度_使用CSS将不透明度仅设置为背景颜色，而不是文本
cumubi7552的博客
06-23 2029
css 设置背景颜色透明度Introduction: 介绍： Opacity is a very key feature when it comes to the appearance of your images and texts and various other elements. One should be very wise to use opacity property. The...
设置opacity里面的内容也跟着一起透明的解决方法
weixin_45575273的博客
01-18 1284
如果直接给盒子设置opacity，里面的子元素不管opacity设置多少都是会继承外面的透明度，解决办法就是用rgb设置颜色:rgba(250, 250, 250, 0.34)
CSS：scrollbar的属性及样式分类
weixin_33819479的博客
01-08 463
overflow            内容溢出时的设置（设定被设定对象是否显示滚动条） overflow-x         水平方向内容溢出时的设置 overflow-y         垂直方向内容溢出时的设置     以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 scrollbar-3d-light-color         ...
css 透明_CSS实现透明度变化的动画 （淡入淡出效果）
最新发布
05-25
实现透明度变化的动画可以使用CSS3中的transition属性和opacity属性。下面是一个简单的示例代码： HTML代码： ``` <div class="box"></div> ``` CSS代码： ``` .box { width: 200px; height: 200px; background...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值