文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML上的图像和反向图像问题

问HTML上的图像和反向图像问题
EN

Stack Overflow用户

提问于 2012-02-10 05:03:52

回答 2查看 53关注 0票数 0

我有一个有ocean.png填充整个屏幕的身体

 body {
 background: url('ocean.png');
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: center;
 background-size: 100%;

  }

然后我想在上面加载另一个图像。

<body>
      <img src="image/bubble/bub0.png" name="bubble" width="100" height="100" alt="bub">

但图像bub0的z不是高于身体背部图像，而是显示在左上角的空白区域，整个海洋背景图像向下移动。我希望bub0图像叠加在海洋背景图像上，并具有更高的z阶数。

html

回答 2

Stack Overflow用户

发布于 2012-02-10 05:07:29

您还需要给它一个position: fixed;

img[name="bubble"] {
    position : fixed;
    top      : 0;
    left     : 0;
    z-index  : 2;
}

票数 3

Stack Overflow用户

发布于 2012-02-10 05:10:04

背景-图像将始终在底部，无论什么。z-index与这个问题无关。

并非所有浏览器都支持背景大小属性，因此它不会像您预期的那样扩展到100%。在IE9+、Firefox 4+、Opera、Chrome和Safari 5+中支持background-size属性。

我认为图片ocean.png居中，它没有真正覆盖整个页面，这会给你一种图片被降低而不是在背景中的感觉。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9218720

复制

相似问题

问HTML上的图像和反向图像问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML上的图像和反向图像问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML上的图像和反向图像问题
EN