html - 背景imgのように振る舞うimg？

Question

ページに物理的な画像があります。

<img src="image.png" alt="image-name" />

でも、体の背景画像のように振る舞いたいです。

body{
background: url(image.png) no-repeat center top;
}

つまり、ブラウザに表示されずに中央に配置されるので、ブラウザなどの幅が広い場合はスクロールバーはありませんか？

これは可能ですか？

score 3 · Accepted Answer

はい、可能です。おそらく、次のようなことをする必要があります。

CSS

#your-image {
    position: absolute;
    z-index:1;
}
#container {
    position: relative;
    z-index: 2;
}

HTML

<body>
    <img id="your-image src="" alt="">
    <div id="container">
        <!-- All your content goes there -->
    </div>
</body>

score 1 · Accepted Answer

あなたposition: fixed; z-index: -5000が欲しいものですか？

position: fixedコンテンツに関係なく、常にブラウザーの特定の位置に画像を固定します。

z-index: -5000すべての背後にイメージを置くだけです

中央に配置するには、事前に画像のサイズを知る必要があると思います。する場合は、追加します

top: 50%; 
left: 50%;
margin-top: -100px;
margin-left: -250px;

100 は画像の高さの半分、250 は画像の幅の半分です。中心位置から取得 :固定要素

score -1 · Accepted Answer

それを使用する正しい方法は次のとおりです。

  body { background-image:url(image.png) no-repeat center top;}

3 に答える 3