0

我在尝试这样做时遇到了很多问题，我现在想知道在 css 中是否有可能。（也许我需要找到使用 PHP、Flash 或 Javascript 的其他方法！）

基本上，我有3张图片。每个都是 1920x1200 (x*y) 的大小。当从左到右放置时，它们会形成风景图像。我想创建一个网页，您可以在其中水平滚动以查看站点的每个部分，其中 3 个图像是 div 元素的背景图像，并且在两侧相互接触。滚动将用这个来处理（这也是 .items 需要位置：绝对的原因。）在大多数情况下，我已经能够创建这个：

HTML：

<div class="items">
    <div class="item" id="item1"><a name="item1"></a>
         text
    </div>

    <div class="item" id="item2"><a name="item2"></a>
         more text
    </div>

    <div class="item" id="item3"><a name="item3"></a>
         even more text
    </div>
</div>

CSS：

#item1, #item2, #item3 { 
    float: left;
    width: 1920px;
    height: 1200px;
}
#item1 {
    background: #ffffff url(../../images/main/1.jpg);
}
#item2 {
    background: #ffffff url(../../images/main/2.jpg);
}
#item3 {
    background: #ffffff url(../../images/main/3.jpg);
}
/* our additional wrapper element for the items */ 
.items { 
    width: 5790px;
    position: absolute;
}

但是，我遇到的问题是我需要使这项工作适用于多种屏幕尺寸和分辨率。我想要做的是使每个#itemn 的高度为可见页面的 100%，但是如果不阻止 div 元素左右出现，我就无法这样做。通常它会导致它们出现在彼此之上。

我尝试按照此处的说明操作并使用 img。但是，通过将位置设置为固定或绝对位置，我使之前向左浮动的 div 元素内的图像出现在彼此的顶部。

为了清楚起见，我想要的效果就像这个网站一样，但我需要调整背景图像的高度以适应页面，否则在我的机器的不同分辨率下看起来会很糟糕。如果需要，我可以提供更多解释，但我认为我已经很好地总结了这个问题。是否有可能以任何方式解决这个问题——也许使用 Javascript、PHP 或 Flash？

编辑

我刚刚发现有一个 CSS3 属性可以完全满足我的需要（背景大小），但它并没有在大多数浏览器中实现...... hack 是使用 -moz-border-image 然后使用 php 放置正确的高度和宽度 px 到 css 中。我不想那样做！

4

1 回答 1

0

您可以使用 Photoshop 将您的三张图像组合成一张大图像吗？如果您使用 CSS 技巧中显示的技术应该可以工作。

于 2009-10-12T14:54:09.050 回答