使用opacity后子元素模糊的问题

使用opacity后,子元素看不清,代码:

 .tenant_item{
        position: relative;
        box-sizing: border-box;
        padding: 0.5rem;
        background: linear-gradient(-270deg,rgba(23,174,219,0.00), rgba(32,182,237,0.27));
        border: 1px solid;
        border-image: linear-gradient(-270deg, rgba(23,174,219,0.00), rgba(44,223,255,0.39) 40%, #1ce5f1) 1 1;
        opacity: 0.15;
      }

图片如下
在这里插入图片描述
百度上很多都是通过rgba解决,但是我设置后样式达不到想要的效果,最后通过用伪类元素绝对定位设置透明度后达到设计图效果
解决方案:使用伪类元素设置opacity

  .tenant_item{
        position: relative;
        box-sizing: border-box; 
        padding: 0.5rem;
      }
  .tenant_item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(-270deg,rgba(23,174,219,0.00), rgba(32,182,237,0.27));
        border: 1px solid;
        border-image: linear-gradient(-270deg, rgba(23,174,219,0.00), rgba(44,223,255,0.39) 40%, #1ce5f1) 1 1;
        opacity: 0.15;
      }

效果:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue自定义样式opacity失效可能有多种原因。以下是几种可能的解决方法: 1. CSS中的opacity属性会影响元素及其子元素的透明度。如果您想要设置一个元素的透明度而不影响其子元素,您可以尝试使用background-color的rgba值来设置透明度。例如,将`background-color: rgba(255, 255, 255, 0.5)`应用于元素,其中最后一个参数0.5表示50%的透明度。 2. 检查是否有其他CSS属性覆盖了opacity属性。如果有其他CSS规则具有更高的优先级并将opacity设置为不同的值,那么它可能会覆盖您尝试设置的值。您可以使用浏览器的开发者工具检查元素的样式规则,并查看是否有其他CSS规则影响了您的opacity属性。 3. 检查Vue组件中是否存在样式作用域问题。在Vue组件中,样式默认是有作用域的,这意味着只能在组件内部应用样式。如果您在组件外部尝试设置opacity属性,它可能不会生效。您可以尝试将样式应用到组件内部的元素上,或者使用全局样式来覆盖组件样式。 4. 检查您的HTML模板中是否有错误或语法问题。如果HTML模板中存在错误或语法问题,可能会导致样式属性无法正确应用。请确保您的模板正确闭合标签,并且没有其他语法错误。 综上所述,如果Vue自定义样式opacity失效,您可以尝试使用background-color的rgba值来设置透明度,检查是否有其他CSS属性覆盖了opacity属性,检查Vue组件中是否存在样式作用域问题,以及检查HTML模板中是否有错误或语法问题。希望这些解决方法能够帮助您解决问题。如果您还有其他问题,请随时提问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值