html - 我想使用 css 在绝对定位的图像后面放置一个固定的背景

Question

在最前面，当页面加载时，我想显示一些分散在周围但具有固定背景的图像。因此，当用户滚动时， body 的其余部分像正常情况一样卷起，具有背景颜色和其他一切。我在很多网站上都看到过这个，所以我猜这很容易做到，但我不能，因为我是菜鸟。 非常感谢任何帮助。

这里是图片的html

<div class="front bg" style="border:5px dashed black;">
    <img id="dp" src="images/dp.jpg" alt="Face Up Front">
    <img id="finger-face" src="images/gall12.jpg" alt="Finger Face">
    <img id="with-friend" src="images/gall19.jpg" alt="With Friend">
</div>

这是我试过的CSS

 .bg{
    background-image: url('images/showoff.jpg');
    background-size:100vw 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position:relative;
}

#dp{
    width:16%;
    height:auto;
    position:absolute;
    top:15%;
    right:8%;
    border-radius: 30px;
}

#finger-face{
    width: 15%;
    height:auto;
    position: absolute;
    top: 55%;
    left: 8%;
}

#with-friend{
    width: 30%;
    height:auto;
    position: absolute;
    top: 25%;
    left: 35%;
    border-radius: 30px;
    box-shadow: -1px -1px 6px 0px #ff0000;
}

编辑:在花了整整一夜解决这个问题后，我的直觉告诉我，这不是一个非常专业和长期的解决方案，但这是为我完成的教程。我在 bg 样式中添加了 background-attachment:fixed 属性。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_full_page

我其实很想知道这是否是一个专业且实用的解决方案。而且我不知道 html{height:100%; 的作用是什么？ margin:0;} 必须播放。因此，如果有任何建议或意见，我将不胜感激。

Answer 1

如果我没看错你想要视差效果。单独使用 css 只有一种解决方案:background-attachment:fixed

它的缺点是不能在某些移动设备上正常工作。

但是，如果您愿意使用第三方库和一些 javascript，那么已经有一些不错的解决方案

parallax.js Stellar.js

仅举几例。谷歌会给你更多。从专业和实际使用来看，两者都没有问题。