css - 整个图像不会显示

Question

* { margin: 0; padding: 0; }

body {
  margin: 8px auto;
  background: #20272D;
  width: 900px;
}

body, td, input, textarea {
  font: 11px Tahoma;
  color: #DDD;
}

#content {
  width: 400px;
  margin: auto;
  background: url(img/blixt.png) 0px 18px no-repeat;
  padding-left: 25px;
}

有一张图片 (blixt.png)，无论里面的内容有多长，我都想将其显示为背景 <div id="content">是!如果它很短，则只显示一点图像，而文本越长，显示的越多。我该如何修复才能显示整个图像？我不想设置高度。

Answer 1

您可以设置最小高度，但这需要您设置 IE 高度修复，因为最小高度在 IE 中不起作用。

这里的问题很明显。您有一个带有背景图像但没有高度的元素，因此它当然会默认为其中内容的高度。

您可以在#content 元素上放置一个高度，或者将背景图像移动到正文。

在正文 css 中试试这个:

background-image: url(img/blixt.png) no-repeat;
background-color: #20272D;