Question

我写了一个网页，其内容位于固定宽度的居中div中，如下所示：

<div style='width:800px; margin: -5px auto 0px auto;' >    
This is a fixed-width centered div!
</div>

一切都很好，直到我被要求在div中放置背景图像。使用CSS背景不可避免地导致图像被拉伸或平铺。我不希望这样。我想要一个图像实例，它的左上角位于我的固定宽度div的左上角。

我尝试过这几种方式。

这是第一种不起作用的方式：

<img src='images/background.jpg' alt='background'
 style='position:relative;left:0;top:0;z-index:-1' />

在此示例中，图像的位置与我想要的完全相同，但div的文本显示在图像下方。

这是第二种不起作用的方式：

<img src='images/background.jpg' alt='background'
 style='position:absolute;left:0;top:0;z-index:-1' />

使用绝对定位，文本会根据需要显示在图像上。但是，图像现在位于页面的左上角。这是可以预料到的，因为没有其他元素具有绝对定位。我知道解决方案应该是将固定宽度居中的div的位置设置为绝对值。但是，当我这样做时，我的固定宽度div不再居中：

我的div不再居中了！

如何编写我的HTML和CSS，以便在固定宽度的居中div中包含文本背后的背景图像？

Answer 1

使用CSS-background不可避免地导致图像被拉伸或平铺。

是的，背景图片重复 - 默认情况下。但是，您可以明确将background-repeat设置为no-repeat

<div style='width:800px; margin: -5px auto 0px auto;background-image:url('images/background.jpg');background-repeat:no-repeat;' >    
This is a fixed-width centered div!
</div>

[编辑] 可以通过将div的min-height设置为图像的像素高度来解决垂直剪裁问题。这将确保您的div始终至少与图像一样高。这是理想的解决方案。

但是，如果您的图像可以忽略更宽而不是div的800px静态宽度，则需要返回到嵌套图像解决方案...制作div position:relative和图像position:absolute和图像的上/下将相对于div而不是页面。与图片上的z-index -1结合使用，您应该很高兴（fiddle demonstrating an un-clipped image）

Answer 2

你可以使用“overflow：visible;”确保图像不会被裁剪。

<div style='width:800px; overflow: visible; margin: -5px auto 0px auto;background-image:url('images/background.jpg');background-repeat:no-repeat;' >    
This is a fixed-width centered div!
</div>

或者，或者，尝试使div的“min-height”与图像的高度相同。我在下面的示例中使用了300px，但您应该将其更改为图像的大小。

<div style='width:800px; min-height: 300px; margin: -5px auto 0px auto;background-image:url('images/background.jpg');background-repeat:no-repeat;' >    
This is a fixed-width centered div!
</div>

Answer 3

您可以使用简写配置background属性：

background: <background-color> url(<background-image>) <background-position-x> <background-position-y> <background-repeat>;

如下：

<div style='position:fixed; width:800px; margin: -5px auto 0px auto; border: 2px solid #ccc; height: 5em; background: rgba(255,255,255,0.5) url(http://davidrhysthomas.co.uk/img/dexter.png) 0 0 no-repeat;'>    
This is a fixed-width centered div!
</div>

JS Fiddle demo

参考：

CSS background at the MDC。

CSS：如何在固定宽度的居中div的背景中显示图像？

3 个答案: