Question

我有这段代码：

<div id="container"> 
<div id="header"> logo ... 
<div id"main"> some content....

容器宽度为960px。所以...我想把主要部分放在一个大图像（2000x300px）我怎么能这样做？

Answer 1

来自你的评论：

@thirtydot我希望用户滚动水平地看其余部分

我明白你现在想要的东西。

你可以这样做：

<div id="largeImageContainer">
    <img .. />
</div>

使用 CSS ：

#largeImageContainer {
    width: 700px;
    margin: 0 auto;
    overflow-x: scroll
}

这是一个显示这个想法的Live Demo。你应该从这个答案中复制代码，而不是我的演示。

关于overflow-x;见：https://developer.mozilla.org/En/CSS/Overflow-x

Answer 2

这个怎么样？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">    
<html>
<head>    
    <style type="text/css">
        #mainSection{
            with:960px;
            background-image:url(http://mydomain.com/images/bg.png);
            background-repeat:no-repeat;
        }
    </style>

    <title></title>
</head>

<body>
    <div id="mainSection"></div>
</body>
</html>

您还可以通过向mainSection样式定义添加类似内容来指定要成像的位置：

    background-position:left top;

使用CSS定位图像

2 个答案: