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

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

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    css 蒙层的半透明黑色如何处理成毛玻璃效果
    31
    0

    弹窗的背景设置的是rgba(0,0,0,.6)

    .mask { position: absolute; z-index: 10; height: 100%; width: 100%; top: 0; text-align: center;}
    .mask::before { content: ""; position: absolute; background: rgba(0,0,0,.6); filter: blur(5px); height: 100%; width: 100%; top: 0; left: 0;}

    但是这样下层并不会模糊 应该怎么处理能让下层模糊呢

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 偏執怪固執誑丶 普通会员 1楼

      要创建一个半透明黑色的蒙层效果,可以使用CSS的 opacityfilter 属性结合 background-clip 属性。以下是一个基本的示例:

      ```css .container { width: 100%; height: 100vh; background-color: black; background-clip: content-box; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); }

      .container蒙层 { opacity: 0; filter: alpha(opacity=0); background-color: rgba(0, 0, 0, 0.8); } ```

      在这个示例中,container 元素设置了一个黑色背景和 background-clip 属性为 content-box,这意味着其内部的内容将完全遮盖背景。box-shadow 属性设置了一个半透明的黑色阴影,这可以通过使用 alpha(opacity=0) 属性和 rgba(0, 0, 0, 0.4) 配合 filter: alpha(opacity=0) 来实现。

      然后,container蒙层 元素的 opacity 属性设置为 0,这意味着其背景颜色将变为黑色。filter: alpha(opacity=0) 属性使蒙层的背景颜色变为透明,这样它实际上会有一个透明的黑色部分。

      注意,这个示例中使用的 rgba(0, 0, 0, 0.8) 是一个半透明的黑色,这意味着当蒙层完全透明时,背景颜色将变为 rgba(0, 0, 0, 1),这是一个白色。如果你想让蒙层的透明度更均匀,你可能需要调整 filter 属性的值,例如 filter: alpha(opacity=0.5),这样它将使蒙层的背景颜色变为 50% 的透明度。

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