Question

我想将两种颜色的图像作为背景，然后在背景上方放置3张图像。这是我做的代码：

<div  style="position: fixed; z-index:100" height="5px"><img  src="http://i44.tinypic.com/257g1nl.jpg" border="0" style="position: fixed; width:100%" ></div>

<div  style="position: fixed; z-index:500"><a href="http://www.hopesheffield.org/hope"><img src="http://i40.tinypic.com/70b4wk.jpg" width="435px" border="0" style="position:fixed; left:1050px;top:120px" ></a></div>

<div style="position: fixed; z-index:500"><img src="http://i42.tinypic.com/11k84mu.jpg"   border="0" width:"435px" style="position:fixed; left:550px;top:120px"> </div> 

<div style="position: fixed; z-index:500"><img src="http://i43.tinypic.com/2sax8nt.png" border="0" width:"535px" style="position:fixed; left:650px; top:550px"></div> 



<head>{{ head_content }}   

<style type="text/css">
  html {
  overflow:hidden;
  }
 </style>

</head>

另外，我不想滚动。在妈妈们，它正在使用Internet Explorer，但是当我从Safari打开页面时，背景上方的图像会被移动。有什么想法吗？

这是网页：http://www.hopesheffield.org/

谢谢！

Answer 1

尝试使用“left”属性的相对值进行定位，而不是使用像素数。

如同：left:25%;和left:60%;用于您的图片。

为了在移动设备上获得更流畅的体验，尽量不要为图像设置固定大小，而是在css而不是html属性中应用相同的相对值。

如果您的问题仍然存在，您可能还需要考虑使用css媒体查询。

Answer 2

像这样更改您的HTML：

<div class="cover">
    <img  src="http://i44.tinypic.com/257g1nl.jpg"/>
</div>

<div class="right">
<a href="http://www.hopesheffield.org/hope">
    <img src="http://i40.tinypic.com/70b4wk.jpg" width="435px"/></a>
</div>

<div class="left">
<img src="http://i42.tinypic.com/11k84mu.jpg" />
</div>

<div class="bottom">
<img src="http://i43.tinypic.com/2sax8nt.png" />
</div>

这是CSS：

.cover{
    position:fixed;
    z-index:1;
    top:0;
    left:0;
}

.right{
    position:fixed;
    z-index:2;
    right:25%;
    margin-right:-217px;
    top:120px;
}
.left{
    position:fixed;
    z-index:2;
    left:25%;
    margin-left:-194px;
    top:120px;
}
.bottom{
    position:fixed;
    bottom:0;
    left:50%;
    margin-left:-382px;
    z-index:2;
}

DEMO

图像在不同浏览器中的位置，html

2 个答案: