Question

在最前面，当页面加载时，我想显示一些散布在周围但背景固定的图像。因此，当用户滚动时，身体的其余部分会像正常的一样卷起，具有背景色和其他所有颜色。我已经在很多网站上看到了这一点，所以我认为这很容易做到，但是我不能说我是菜鸟。非常感谢您的帮助。

这里是图片的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;
}

编辑：在整夜熬过这个烂摊子之后，我发现我的直觉告诉我这不是一个非常专业且长期的解决方案，但这是为我完成的教程。我以background-attachment:fixed样式添加了bg属性。

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

仅举几例。 Google将为您带来更多收益。从其专业和实际使用来看，它们中的任何一个都没有问题。

Answer 2

使用background-attachment: scroll或background-attachment: local而不是background-attachment: fixed

我想使用CSS在绝对定位的图像后面放置固定背景

2 个答案: