Question

我正在努力将我所拥有的图形放在我网站的首页（孩子和老师！）上，有更好的方法吗？大多数显示它很好，但显然我需要所有人。

另外我注意到当分辨率很低（比如800x600）时，云会出现在标题上，就像浏览器不喜欢z-index一样？

网站是：

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

我的代码如下所示：

 <style type="text/css">

    .stretch {
        width:100%;
        height:100%;
    }
    .stretchw {
        width:100%;
    }
    #cloud1 {
        position: absolute;
        left: 50px;
        top: 50px;
        z-index:4;
    }
    #cloud1 img {
        max-width: 70%;
        height:auto;
    }
    #cloud2 {
        position: absolute;
        right: 50px;
        top: 50px;
        z-index:5;
    }
    #cloud2 img {
        max-width: 70%;
        height:auto;
    }
    .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:6;
    }
    #kids {
        position: absolute;
        left: 30%;
        bottom: 50px;
        z-index:8;
    }
    #kids img {
        max-width: 100%;
        height:auto;
    }
    body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    color: #666;
    background-color: #67b8ed;
    }
    h1 {
    color: #000;
    font-size: 35px;
    font-family:Palatino Linotype;
    font-style:italic;
    text-align:center;
    }
    .maintable {
        z-index:7;
    }
    table.center {
    margin-left:auto; 
    margin-right:auto;
    z-index:8;
    }
    .auto-style1 {
        width: 8px;
    }
</style>

有什么想法吗？

Answer 1

您需要动态增加或减少div标签的大小及其内部的相应图像，以满足您的需求。看看内森的答案，然后去看看吧。 Height equal to dynamic width (CSS fluid layout)

现在，你的左边：30％显然不适用于所有视口。

Answer 2

解决问题的一个（欺骗）更简单的方法是在正确对齐时下载整个背景图像。然后将其用作身体标记的背景图像，宽度为：100％，高度：100％： p

使用CSS定位图像的建议

2 个答案: