时间戳

首页 > 解决方案 > 我想使用 css 在绝对定位的图像后面放置一个固定背景

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

问题描述

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

这是图像的 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;}必须扮演什么角色。因此，我将不胜感激任何建议或意见。

标签： htmlcsscss-position

解决方案

如果我理解正确，您需要视差效果。仅使用 css 只有一种解决方案：background-attachment:fixed

这具有在某些移动设备上无法正常工作的缺点。

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

parallax.js 恒星.js

仅举几例。谷歌会让你更加盛大。就其专业和实际使用而言，两者都没有问题。

推荐阅读