如果 <div> 为空，背景图像不会出现？答案

【问题标题】：background-image doesn't appear if <div> is empty?如果 <div> 为空，背景图像不会出现？
【发布时间】：2021-11-24 23:44:37
【问题描述】：

我首先在<body> 中创建了一个<div> 以在页面顶部绘制一条顶线：

<body>
    <div class="bordertop"></div>
    .....
</body>

风格：

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;    
}

但是，top_border image 不会出现，除非我在 <div> 中写入一些文本，但我不想这样做。我该如何解决这个问题？

【问题讨论】：

上边框图片有什么特别之处吗？或者你可以设置一个hr 标签的样式吗？
如果只是一行，为什么不使用border-top:1px solid #000？
是的，它很特别。这是一条四色线，会重复。

标签： css html

【解决方案1】：

由于 div 为空，因此没有内容可以将其“打开”，从而使 div 的高度为 0px。在 div 上设置明确的尺寸，您应该会看到背景图片。

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

【讨论】：

在我的情况下，明确的高度就足够了。谢谢:)
仅当您也将位置设置为绝对时才需要指定宽度。

【解决方案2】：

您可能需要将 <div> 元素的 css width 和 height 设置为您想要的任何大小

.bordertop {
    background-image: url(../images/top_border.png);
    background-repeat: repeat-x;
    width: 200px;
    height: 100px;
}

【讨论】：

谢谢。设置一个明确的高度就足够了。

【解决方案3】：

给div 一个height:1px。那应该行得通。否则你的div 是0px 高，这意味着你什么都看不到。

你也可以给它padding-top:1px

您可以做的另一件事是在 CSS 中的 body 上设置行的 background-image。这是假设该行是body 的整个宽度。

见demo

【讨论】：

1 px 真的有用吗？？

【解决方案4】：

正如我上面的答案所建议的那样^^'这是因为它实际上没有大小，您需要将内容放入其中以调整其大小或在cssbordertop类中设置宽度/高度或填充，或者您可以在里面放另一个空它具有设定的大小。我打算跳过这个答案，因为已经有了答案，但我只是想补充一下，宽度/高度不是你唯一的选择。

顺便说一句，哦，伙计，这里的人发帖速度如此之快，我有时想知道这是否是一场比赛，奖品是什么，一定有一些，我想帮助别人本身就是很棒的奖品。 :) 当我开始输入这个时，还没有答案。

【讨论】：

感谢您的加入。你需要提高你的打字速度兄弟;-)

【解决方案5】：

我发现的最好方法是：风景：

width:100%;
height:0;
padding-top:[ratio]%;

肖像：

width:[ratio]%;
height:0;
padding-top:100%;

您需要确定哪一边较长，并接受此尺寸为 100% 然后计算 [ratio] - 较短尺寸相对于 100% 较长尺寸的百分比。然后使用上述解决方案之一。

【讨论】：

【解决方案6】：

我很长一段时间都遇到同样的问题，我的解决方案是给出以下样式线：最小高度。如果里面没有元素，这会将 div 打开到给定的高度。内部元素越多，高度会变大，但不会变小。

示例代码：

.fixed-bg {

    /* The background image */
    background-image: url("img_tree.gif");
    /* Set a specified height, or the minimum height for the background image */
    min-height: 500px;
    /* Set background image to fixed (don't scroll along with the page) */
    background-attachment: fixed;
    /* Center the background image */
    background-position: center;
    /* Set the background image to no repeat */
    background-repeat: no-repeat;
    /* Scale the background image to be as large as possible */
    background-size: cover;
}

代码来自https://www.w3schools.com/cssref/pr_background-attachment.asp

【讨论】：

【解决方案7】：

如果它是 body 中唯一的 div 元素，请使用以下样式使其占据全角。

.bordertop  {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-image: 
   url('../images/top_border.png');
}

【讨论】：

【解决方案8】：

即使设置了宽度，我也无法在 div 中显示背景。原来我不得不把“../”放在 url 部分然后它显示了我挣扎了很长一段时间的图片。

left {
    width: 800px;
    height: auto;
    min-height: 100%;
    position: relative;
    background-image: url("../img/loginpic.jpg");
    background-size: cover;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background-color: crimson;
}

【讨论】：

【解决方案9】：

否则，您可以只打开一个<p></p> 并在样式中，删除默认的边距长度，即margin: 0;，并添加不会占用太多空间的height: 0.1px，这样就可以了。

注意：它会正常工作，直到缩小不超过 50%，所以在将其应用到 body 之前，请确保使用案例。

【讨论】：