账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    after before 设置遮罩效果 时 遮罩总是挡住了对应的元素?
    49
    0
    @import "../../vari";
    
    .up-mask {
      z-index: 100; //less then ui:z-index:1104
      &:after {
        content: '';
        position: fixed;
        z-index: 99;
        background-color: @default-mask-color;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }

    目前的解决:增加一个 相邻 dom

    @import "../../vari";
    
    .up-mask {
      z-index: 100; //less then ui:z-index:1104
      //&:after {
      //  content: '';
      //  position: fixed;
      //  z-index: 99;
      //  background-color: @default-mask-color;
      //  top: 0;
      //  right: 0;
      //  bottom: 0;
      //  left: 0;
      //}
      // after & before 会遮挡元素本身
      & + .mask {
        content: '';
        position: fixed;
        z-index: 99;
        background-color: @default-mask-color;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }

    after & before 感觉还是对应dom的内嵌子dom;导致没法设置低于自身的z-index。也许是我的写法不对?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 曾爱曾喜曾忧伤 普通会员 1楼

      是的,设置遮罩效果时,遮罩通常会覆盖所有的元素,包括未添加到遮罩中的元素。这是因为遮罩是使用CSS的box-shadow属性实现的,它允许我们在元素上创建一个阴影。

      如果你想要覆盖未添加到遮罩中的元素,你需要在CSS中设置遮罩的样式。例如,你可以使用box-shadow属性来创建一个黑色的背景,并且在其中添加一个红色的边框,如下所示:

      css .box-shadow { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); background-color: black; border: 1px solid red; }

      在这个例子中,box-shadow属性的值是黑色的阴影和一个红色的边框。这将使所有的元素都包含在阴影之中,包括未添加到遮罩中的元素。

      如果你想要在某些元素上设置遮罩效果,而忽略其他元素,你可以使用display属性来改变元素的显示方式。例如,你可以将一个元素设置为block,这将使其与周围的元素重叠,从而阻止遮罩覆盖它。你可以使用display: none来实现这个效果,如下所示:

      css .box-shadow { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); background-color: black; border: 1px solid red; } .box-shadownone { display: none; }

      在这个例子中,box-shadownone元素将被设置为display: none,这将使其与周围的元素重叠,从而阻止遮罩覆盖它。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部