V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
imherer
V2EX  ›  程序员

请教各位前端大佬像这种效果怎么实现

  •  
  •   imherer · 2022-03-16 15:49:40 +08:00 · 1323 次点击
    这是一个创建于 968 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如图,这个背景(还有点玻璃质感和纹路)除了用两张不同颜色的图片实现外 纯 css 能实现么?

    freak118
        1
    freak118  
       2022-03-16 15:51:54 +08:00
    两个背景图叠起来不就行了 通过变化上边一条的宽度控制
    ahswch
        2
    ahswch  
       2022-03-16 15:51:57 +08:00   ❤️ 1
    这个大佬的博客你翻下 应该有类似的 https://www.cnblogs.com/coco1s/
    murmur
        3
    murmur  
       2022-03-16 15:57:20 +08:00
    用图片很丢人么,这种纯灰度的 png 图片,能又几个 kb ,还能百分之一千还原设计师的设计
    lisongeee
        4
    lisongeee  
       2022-03-16 16:00:09 +08:00
    svg 加 滤镜就行
    imherer
        5
    imherer  
    OP
       2022-03-16 16:00:38 +08:00
    @murmur 不要先入为主。我是后端,我就是看到了想来讨论下看看 css 能不能实现。没说图片丢人啦
    darknoll
        6
    darknoll  
       2022-03-16 16:10:35 +08:00
    imherer
        7
    imherer  
    OP
       2022-03-16 16:12:19 +08:00
    @darknoll 嗯,这个就直接用 2 张图片拼起来的效果吧
    marcong95
        8
    marcong95  
       2022-03-16 16:47:13 +08:00   ❤️ 1
    不考虑兼容性的话,那就用 clip-path 剪一个伪元素出来咯(这东西),手撸 svg 有点丑,凑合一下

    https://codepen.io/marcong95/pen/BaJooyN
    marcong95
        9
    marcong95  
       2022-03-16 16:48:03 +08:00
    @marcong95 #8 (括号内删掉)
    clandyuki
        10
    clandyuki  
       2022-03-16 17:04:26 +08:00   ❤️ 2
    纯 css 也可以,比如这样,波浪不是很还原,应该也够用了
    https://jsfiddle.net/pfda2qjg/21/
    xingyuc
        11
    xingyuc  
       2022-03-16 17:05:27 +08:00
    @imherer 这人什么贴都杠,屏蔽就好了
    imherer
        12
    imherer  
    OP
       2022-03-16 17:17:10 +08:00
    @xingyuc 哈哈
    murmur
        13
    murmur  
       2022-03-17 07:56:05 +08:00
    @imherer 前端陷入了娱乐圈,什么东西都想炫技,随着浏览器的兼容性改善,能用的技术越来越多,但是开发容易进入死胡同
    imherer
        14
    imherer  
    OP
       2022-03-17 09:19:39 +08:00
    @murmur 大佬说的是
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   930 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 21:51 · PVG 05:51 · LAX 13:51 · JFK 16:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.