CSS背景定位与固定问题求助：图片无法固定及居中

核心错误点 #

• 你给<img>标签用了background-position、background-attachment这类背景图片专属属性，这些属性只对元素的background-image生效，对<img>本身完全无效。
• 没有添加固定定位的核心属性position: fixed，这是让元素固定在视口不随滚动移动的关键。

修正后的代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #photo{
            position: fixed; /* 固定定位，脱离文档流，相对于视口定位 */
            left: 50%; /* 水平方向移到视口中间位置 */
            transform: translateX(-50%); /* 向左偏移自身宽度的一半，实现精准居中 */
            top: 20px; /* 可调整垂直位置，比如距离顶部20px */
            width: 30px;
        }
        .body{
            width: 500px;
            height: 5000px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <main class="body">
        <div >
            <img src="Wikipedia_logo.png" alt="logo" id="photo"> <!-- 修正了src里多余的] -->
        </div>
    </main>
</body>
</html>

额外说明 #

• 注意修正<img>的src路径，你原来的Wikipedia_logo].png多了一个]，会导致图片加载失败。
• 如果需要垂直居中，可以把top: 20px换成top: 50%; transform: translate(-50%, -50%);，这样就能让logo在视口正中央固定。

内容的提问来源于stack exchange，提问作者Alain