Question

我尝试使用div和background image制作text message。因为当我制作width as 100%和height as auto时，一切都很完美。我认为div高度是自动的，因为每当我增加font size of the text时div高度也会动态增加。但现在我的问题是当我在div中留下空信息然后它没有显示任何，因为height:auto我想显示具有实际背景图像的div。即使我留言也是空的。是否可以显示高度为auto的背景图像。

这是我的代码：

#loginContainer {
-moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif") 
    no-repeat scroll center center #FF660D;  /*for example */
    border-color: #FFFFFF;
    border-image: none;
    border-right: medium solid #FFFFFF;
    border-style: none solid solid;
    border-width: medium;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    right: 0;
    top: 0;
    vertical-align: super;
    width: 100%;
    z-index: 9999999;
}

以下是 fiddle

以下是 fiddle ，div中包含空信息

Answer 1

将min-height设置为等于图像的高度。

Answer 2

为div添加最小高度，如下所示：

#loginContainer {
    min-height: 200px;
}

Working Sample

Answer 3

将min-height设置为＃loginContainer

检查小提琴

http://jsfiddle.net/a39Va/12/

Answer 4

只需添加  如果没有内容

 <div id="loginContainer">
&nbsp;
  <a class="" href="#"></a>
</div>

Answer 5

IE6中的最小高度将失败。您可能需要考虑添加以下内容：

#loginContainer {
  min-height: 200px;
}
* html #loginContainer { 
  height:200px; 
}

由于IE6是唯一能识别'* html ....'的浏览器，其他浏览器只会忽略它。

除非你不关心IE6！（我希望这对我来说是可能的！）

如何使用css使背景图像可见？

5 个答案: