V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
LeeReamond
V2EX  ›  问与答

前端 css 有没有办法实现遮罩效果?

  •  
  •   LeeReamond · 111 天前 via Android · 538 次点击
    这是一个创建于 111 天前的主题,其中的信息可能已经有所发展或是发生改变。
    如题,想实现的效果是,假设目前有两张分辨率相同的图片堆叠在一起(只显示出上面的那一张),我想要创建一个第三方 div,比如它是圆形或者椭圆形的,让这个形状作为遮罩,显示下方图片,其余无遮罩的部分显示上当图片,这是可以实现的吗?
    6 条回复    2021-07-12 18:50:10 +08:00
    virgo
        1
    virgo   111 天前
    css clip-path
    LeeReamond
        2
    LeeReamond   111 天前
    @virgo 感谢,有效。但是试了试这个属性是不是和阴影属性相冲突,我想表示一个方块悬浮在平面上面的感觉,需要有一定的阴影效果来体现距离感,但是加上了没反应
    dfkjgklfdjg
        3
    dfkjgklfdjg   111 天前   ❤️ 1
    dfkjgklfdjg
        4
    dfkjgklfdjg   111 天前
    @dfkjgklfdjg #3 懒得用 CSS:mask 属性了,直接找了现成的 clip-path 路径就用了,你可以根据自己需要来选择使用 mask 还是 clip-path 。

    https://developer.mozilla.org/en-US/docs/Web/CSS/filter
    https://developer.mozilla.org/en-US/docs/Web/CSS/mask
    https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
    dfkjgklfdjg
        5
    dfkjgklfdjg   110 天前
    @LeeReamond #2 哦,对了,忘了说,`box-shadow` 在对于一些不规则图形应用会有问题,
    如果需要在 clip-path 裁剪的内容上应用阴影需要使用 `filter: drop-shadow()`

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/drop-shadow()
    dfkjgklfdjg
        6
    dfkjgklfdjg   101 天前
    这段时间才有空把把 mask 的 demo [https://codepen.io/yogwang/pen/PombGQq?editors=1100] 做了,
    同时也把笔记纪录好了,欢迎吐槽 [https://yogwang.site/2021/CSS-mask/]
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2697 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 12:27 · PVG 20:27 · LAX 05:27 · JFK 08:27
    ♥ Do have faith in what you're doing.