首页 > 其他分享 >关于父元素的opacity属性影响子元素opacity属性的显示问题

关于父元素的opacity属性影响子元素opacity属性的显示问题

时间:2024-08-11 19:26:30浏览次数:8  
标签:opacity 效果 元素 透明度 解决 属性

这里主要解决的是子元素不需要透明度但是父元素需要透明度,但是子元素继承了父元素的透明度导致的子元素透明度失效的问题。

1.问题描述

期望效果

页面效果 

2.解决方案

这里尝试了很多方法,包括但不限于创建伪类,给子元素添加!important优先级,但无一例外,都不生效,最后也是通过rgba解决了

 

3.解决效果

标签:opacity,效果,元素,透明度,解决,属性
From: https://blog.csdn.net/XiaomeiGuiSnJs/article/details/141108678

相关文章

  • 030.Vue3入门,父页面给子页面传递attribute属性
    1、App.vue代码如下:<template><Father/></template><scriptsetup>importFatherfrom'./view/Father.vue'</script><style></style>2、Father.vue代码如下:<template><h3>父页面</h3><......
  • 012.Vue3入门,class属性的几种绑定方法
    1、代码如下:<template><h3>class绑定</h3><div:class="{'active':isActive,'text-danger':hasError}">Class样式绑定1</div><div:class="classObject">Class样式绑定2</div><div......
  • flex常见属性容器
    display:flex将一个元素定义为Flex布局容器的属性flex-direction设置Flex容器主轴方向的属性justify-content用于定义Flex容器内子元素在主轴上对齐方式align-items用于定义Flex子元素在交叉轴上对齐方式flex-wrap控制子元素在主轴方向空间不足是否换行gap子元素之间间隙......
  • SAP 某 ABAP 系统标准类中仅有 5.4% 公有属性被 READ-ONLY 修饰,原因竟然是…
    笔者之前的文章被很多人误解的ABAP关键字:READ-ONLY 发布之后,有朋友询问,SAP标准实现里,对这个READ-ONLY使用的场景多吗?其实这个问题我们可以自己找到答案。思路是选择一个SAP系统,统计出类的总数,这些类总共定义了多少个属性,其中有多少属性,使用了READ-ONLY来修饰。......
  • 力扣面试经典算法150题:移除元素
    移除元素今日的题目依旧是力扣面试经典算法150题中数组相关的题目:移除元素题目链接:https://leetcode.cn/problems/remove-element/description/?envType=study-plan-v2&envId=top-interview-150题目描述给定一个排序数组nums和一个值val,需要在原地移除数组中所有等......
  • 011.Vue3入门,计算属性的使用,让模板语法更简洁
    1、代码如下:<template><h3>计算属性</h3><div>{{func1}}</div><div>{{func1}}</div><div>{{func1}}</div><!--<div>{{func1()}}</div>--><!--<div>{{func1()}}&......
  • css子元素、兄弟元素、直接子元素如何表示
    在CSS中,选择器用于指定你想要样式化的HTML元素。关于子元素、兄弟元素和直接子元素的表示,我们可以使用不同类型的选择器。以下是一些基本的概念和示例:子元素(DescendantSelector)子元素选择器,或者更准确地说是后代选择器,使用空格来指定一个元素内部的另一个元素,无论它们之间隔了......
  • 004.Vue3入门,使用绑定属性时undefined和disabled用法
    1、代码如下:<template><divv-bind:id="myId1"v-bind:class="testCls">测试1</div><divv-bind:id="myId2"v-bind:title="testTitle">测试2</div><div:id="myId3":class="te......
  • Collection(接口)及对单个元素进行操作day12
    packagecom.shujia.day12;importjava.util.ArrayList;importjava.util.Collection;/*Collection:合层次结构中的根界面。集合表示一组被称为其元素的对象。一些集合允许重复元素,而其他集合不允许。】、有些被命令和其他无序。JDK不提供此接口的任何直接实现:它......
  • 计算属性-监听属性,生命周期,组件,组件通信之父传子,组件通信之子传父,ref属性
    Ⅰ计算属性-监听属性【一】计算属性:computed#1本质是一个函数,但是当属性用 计算属性是基于它们的依赖进行缓存的计算属性只有在它的相关依赖发生改变时才会重新求值计算属性就像Python中的property,可以把方法/函数伪装成属性#2计算属性和普通函数的区别 ......