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

这个网页效果如何实现?

  •  
  •   ahdw · 2019-04-08 21:10:45 +08:00 · 1953 次点击
    这是一个创建于 2087 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如图所示

    效果

    来自这个网站:flaw.men

    我看了一下,应该是一个 Wordpress 博客,这个主题应该是现成的,并且额外使用了 Headroom.jsWP Rocket,推测博客主懂一些编程。

    不知道各位知不知道这个主题名字是什么?或者如何联系到博客主呢?

    9 条回复    2019-04-09 11:30:17 +08:00
    Kilerd
        1
    Kilerd  
       2019-04-09 00:09:50 +08:00
    很简单的一个 css 技巧
    可是你不懂编程,我说出来你也实现不了鸭
    agdhole
        2
    agdhole  
       2019-04-09 00:42:20 +08:00 via Android
    js dom.style + css3 transform
    treblex
        3
    treblex  
       2019-04-09 01:22:55 +08:00 via Android
    放一个 body 背景图就行了,然后 div 固定宽高,背景透明
    changwei
        4
    changwei  
       2019-04-09 03:23:32 +08:00
    楼主你好,我在电脑上使用 chrome 审查元素帮你看了一下。

    原理是整个网页背景图片就是底下那个圆形图片,然后#content 这个元素设置了 padding-bottom,当 box-sizing 为 border-box 的情况下,padding 是透明的(也就是 padding 内边距部分直接显示最底层背景图片的内容),只要把 padding-bottom 的尺寸设置为那个圆形图片的 height 就好了。
    Mutoo
        5
    Mutoo  
       2019-04-09 07:28:18 +08:00
    楼上都想复杂了,某个带背景的 section,设置背景固定即可:
    background-attachment: fixed;
    xingyue
        6
    xingyue  
       2019-04-09 10:01:56 +08:00
    @changwei 然后我也按下了 F12,基本原理如你所说,但并不是背景图,而是一个 position:fixed 的 footer 固定在了页面下方,里面放了个 svg,然后 z-index: -1 ; ps:#content 这个元素没有设置背景色,无论 box-sizing 如何都是透明的~
    ahdw
        7
    ahdw  
    OP
       2019-04-09 11:27:12 +08:00
    @Kilerd 我确实不懂 CSS,但是有一些编程经验,找的工作也是程序员。如果知道具体怎么做,花点时间应该可以实现出来。这么问,是为了帮不会编程的朋友找一个简单的实现方法。
    ahdw
        8
    ahdw  
    OP
       2019-04-09 11:27:47 +08:00
    @agdhole 感谢回复,可是我不懂前端。
    ahdw
        9
    ahdw  
    OP
       2019-04-09 11:30:17 +08:00
    @xingyue
    @changwei
    @Mutoo
    感谢回复。真相应该是你们说的这样了,我猜应该是 WP 主题自带的效果,而不是修改主题得到的。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3479 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 04:34 · PVG 12:34 · LAX 20:34 · JFK 23:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.