Question

我正在处理的网站似乎没有显示某些图片。例如使用IE和Firefox我的网站看起来很好，但是使用Safari我只得到蓝色背景，有问题的网站是：

http://www.huntspillfederation.co.uk/

为学校做这件事，我的网页设计技巧非常好（正如你所知道的那样！）

我猜它的CSS就是问题所在，在这种情况下，错误就在这段代码的某处：

<style type="text/css">
    #background {
        width: 100%; 
        height: 100%; 
        position: fixed; 
        left: 0px; 
        top: 0px; 
        z-index: -100; /* Ensure div tag stays behind content; -999 might work, too. */
    }
    .stretch {
        width:100%;
        height:100%;
    }
    .stretchw {
        width:100%;
    }
    #cloud1 {
        position: absolute;
        left: 50px;
        top: 50px;
        z-index:-99;
    }
    #cloud2 {
        position: absolute;
        right: 50px;
        top: 50px;
        z-index:-98;
    }
    .bottom {
    background-image: url("images/hill3.png");
    background-position: left bottom;
    background-repeat: repeat-x;
    position:absolute;
    bottom:0px;
    left:0px;
    width: 100%;
    height: 263px;
    border: none; 
    overflow-x: hidden;
    z-index:-97;
    }

    body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    color: #666;
    }
    h1 {
    color: #000;
    font-size: 35px;
    font-family:Palatino Linotype;
    font-style:italic;
    }
</style>

非常感谢任何帮助！

：）

Answer 1

看起来您的负z-index是导致问题的原因。从0开始，对于要在背景前显示的元素，请更高。

Answer 2

您不需要在背景div中使用container_bg1.jpg图像。在您的身体标签上添加：
```
background-color: #67b8ed;
```

然后删除背景div和图像。此时您不再需要它们，并且它可以减少一个div和图像，可能与页面上显示的其他内容发生冲突。

请勿对图像应用动态高度和宽度。我看到云层根据窗户的高度拉伸。
在Safari，Chrome，IE和Firefox中，图片看起来很不错。

网站图形不出现在某些浏览器中

2 个答案: