0

我的问题的简单说明：

我的问题的插图

我正在尝试构建具有特定宽度的页面，但我希望标题图像向网站其余部分的左侧延伸 50px。

忍受我一点。

下面的代码片段显示了我当前的 html 和 css：

<body>
  <div id="header">
  </div>
</body>

body: {
  background-color: #FDFBDC;
}
#header {
  background: transparent url('images/headerforweb.png') no-repeat -50px 0;
  margin-left: auto;
  margin-right: auto;
}

我想要实现的是让图像在#header div 左侧扩展 50px。但是，我希望#header 居中，所以我必须将左右边距设置为自动。另外，我不知道标有“？”的距离，因为它取决于客户端的屏幕尺寸。

问题是，通过我的方法，将图像设置为#header 的背景，多余的 50px 被剪裁了。我环顾四周，发现背景图像不能超出其元素的大小。

我还尝试将#header 包含在一个包装器div 中，它延伸到页面的整个宽度，并将图像设置为背景。但是，在那种情况下，我需要知道“？”，将其设置为图像背景的左边距，但不可能知道。

还有其他想法吗？

4

3 回答 3

3

您可以通过使图像成为标题的子图像，然后使用负边距来做到这一点。

像这个jsfiddle

<div id="header">
  <div id="image">
  </div>
</div>​

#header { 
    margin: 0 auto;
    width: 400px;
    background: red;
    height: 80px;
}

#image {
    margin-left: -50px;
    background: blue;
    width: 300px;
    height: 50px;
}​
于 2012-11-14T15:04:38.197 回答
1

在标题中包含另一个跨度并将背景图像传递给该跨度。添加位置：相对于#header。和 position:absolute;left:-50px;top:0 到新创建的跨度。

于 2012-11-14T15:04:44.560 回答
1

或者只是使用 position:relative 在包含您的图像的封闭 div 上。

body: {background-color: #FDFBDC;}
#header {
color:#ccc;
width:800px;
height:600px;
margin-left: auto;
margin-right: auto;
}

div.header_image { position:relative; left:-50px; top:0px;      background:url(images/headerforweb.png) 0 0  no-repeat;}



<div id="header">
<div class="header_image"> 
<h1>CONTENT</h1>
<h2>MORE CONTENT</h2>
<h3>MORE CONTENT</h3>
</div>
</div>
于 2012-11-14T15:59:00.023 回答