如果<div>为空,则不显示背景图像?

iTu*_*rki 12 html css

我创建了<div><body>一个在页面顶部绘制顶行的东西:

<body>
    <div class="bordertop"></div>
    .....
</body>
Run Code Online (Sandbox Code Playgroud)

和风格:

body {
    font-family: Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
    margin:0;
}
.bordertop {
    background-image: url(../images/top_border.png);
    background-repeat: repeat-x;    
}
Run Code Online (Sandbox Code Playgroud)

但是,top_border image除非我在里面写一些文字<div>但我不想这样,否则不会出现.我怎么能解决这个问题?

Luk*_*uke 14

由于div是空的,没有内容可以将其"打开",使div保持为0px高.在div上设置显式尺寸,您应该看到背景图像.

.bordertop 
{
    background-image: url(../images/top_border.png);
    background-repeat: repeat-x;    
    height: 100px;
    width: 100%; /* may not be necessary */
}
Run Code Online (Sandbox Code Playgroud)

  • 仅当您将位置设置为绝对时,才需要指定宽度. (2认同)