Question

我的问题的简单说明：

illustration of my problem

我正在尝试构建一个具有特定宽度的页面，但我想要一个标题图像将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居中，所以我必须左右设置边距为auto。另外，我不知道标有“？”的距离，因为它取决于客户的屏幕尺寸。

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

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

还有其他想法吗？

Answer 1

您可以通过将图像作为标题的子图像，然后使用负边距来实现此目的。

喜欢这个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;
}

Answer 2

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

Answer 3

或者只是在带有图像的封闭div上使用position：relative。

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>

让背景图像从div向左延伸

3 个答案: