img 表现得像背景图片？

Posted 2023-03-05

技术标签:

【中文标题】img 表现得像背景图片？【英文标题】：img behaving like a background img? 【发布时间】：2012-11-05 04:23:35 【问题描述】：

我在页面上有一个物理图像..

<img src="image.png"  />

我希望它表现得好像它是身体背景图像..

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

即在浏览器看不到的情况下居中，所以如果浏览器更宽则没有滚动条等？

这可能吗？

【问题讨论】：

图片总是居中吗？ 【参考方案1】：

position: fixed; z-index: -5000 是你想要的吗？

position: fixed 使图像始终固定在浏览器上的某个位置，无论内容如何。

z-index: -5000 把图片放在后面

要使其居中，我认为您需要事先知道图像的大小。如果你这样做，添加

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

其中 100 是图像高度的一半，而 250 是图像宽度的一半。取自Center a position:fixed element

演示：http://jsfiddle.net/SPsRd/1/

【讨论】：

【参考方案2】：

正确的使用方法是：

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

【讨论】：

【参考方案3】：

是的，有可能，您可能必须这样做：

CSS

#your-image 
    position: absolute;
    z-index:1;

#container 
    position: relative;
    z-index: 2;

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

【讨论】：

如果你把“z-index:1”改成“z-index:-5000”，它真的有效！:) 谢谢！:)

以上是关于img 表现得像背景图片？的主要内容，如果未能解决你的问题，请参考以下文章