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

【问题标题】：CSS: How to display an image in the background of a fixed-width, centered div?CSS：如何在固定宽度、居中的 div 的背景中显示图像？
【发布时间】：2011-09-17 04:55:15
【问题描述】：

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

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

在我被要求在 div 中放置背景图像之前，一切都很好。使用 CSS-background 不可避免地会导致图像被拉伸或平铺。我不想要那个。我想要一个图像的实例，它的左上角位于我的固定宽度 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 中包含文本，并在文本后面添加背景图像？

【问题讨论】：

@antisanity，感谢您使用background-repeat CSS 的回答。我仍然想知道是否有一种方法可以使用带有 img 标签的 CSS 定位。我相信这将是一件很棒的事情，可以用于未来的努力。

标签： html css css-position

【解决方案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 和图片 @ 987654328@ 并且图像的顶部/左侧将相对于 div 而不是页面。结合图片上的z-index-1，你应该很高兴（fiddle demonstrating an un-clipped image）

【讨论】：

+1：这与我想要的非常接近，并且它处理了 div 大于图像的情况。但是，只要 div 小于图像，此代码就会导致图像被裁剪。

【解决方案2】：

您可以使用“溢出：可见；”以确保图像不会被裁剪。

<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 的“最小高度”与图像的高度相同。我在下面的示例中使用了 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>

【讨论】：

【解决方案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.

【讨论】：