Html 如果 <div> 为空，背景图像不会出现？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11963687/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
background-image doesn't appear if <div> is empty?
提问by iTurki
I created a <div>first thing in the <body>to draw a top line at the top of the page:
我创建了<div>第一件事<body>，在页面顶部绘制一条顶线：
<body>
<div class="bordertop"></div>
.....
</body>
and the style:
和风格：
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;
}
However, the top_border imagedoesn't appear unless I write some text inside the <div>but I don't want to. How could I fix this?
但是，top_border image除非我在里面写一些文字<div>但我不想，否则不会出现。我怎么能解决这个问题？
采纳答案by Luke
Since the div is empty, there's no content to push it "open" leaving the div to be 0px tall. Set explicit dimensions on the div and you should see the background image.
由于 div 是空的，因此没有内容可以将其“打开”，从而使 div 的高度为 0px。在 div 上设置显式尺寸，您应该会看到背景图像。
.bordertop
{
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
height: 100px;
width: 100%; /* may not be necessary */
}
回答by Sylvain Guillopé
You might need to set the css widthand heightof your <div>element to whatever size you want
您可能需要将 csswidth和元素的 css 设置height为您<div>想要的任何大小
.bordertop {
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
width: 200px;
height: 100px;
}
回答by Moin Zaman
Give the diva height:1px. That should work. Otherwise your divis 0pxhigh, meaning you won't see anything.
给div一个height:1px。那应该工作。否则你的div值0px很高，这意味着你什么也看不到。
You could also give it padding-top:1px
你也可以给 padding-top:1px
Another thing you could do is to set the background-imageof the line on the bodyin your CSS. This is assuming the line is the entire width of the body.
您可以做的另一件事是在 CSS 中设置background-image行的body。这是假设线是body.
See demo
看演示
回答by Cyber
As the answers above me suggest ^^' it's because it has virtually no size, you need either to put content inside to resize it or to set width/height or padding in css bordertop class, or you can put another empty inside it with set size. I was going to skip this answer since there are already answers but I just wanted to add that width/height is not your only option.
正如我上面的答案所建议的 ^^' 这是因为它几乎没有大小，您需要将内容放入其中以调整其大小或在 css bordertop 类中设置宽度/高度或填充，或者您可以使用 set 在其中放置另一个空尺寸。我打算跳过这个答案，因为已经有答案，但我只想补充一点，宽度/高度不是您唯一的选择。
On a side note, oh man, people here posting so fast I sometimes wonder if its a race and what is the prize, there must be some, I guess helping other is itself great prize. :) When I was starting to type this there was no answer yet.
顺便说一句，哦，伙计，这里的人发帖速度如此之快，我有时想知道这是否是一场比赛，奖品是什么，必须有一些，我想帮助他人本身就是巨大的奖品。:) 当我开始输入这个时，还没有答案。
回答by Kitty Hawk
The best way I have found is: for landscape:
我发现的最好方法是：对于景观：
width:100%;
height:0;
padding-top:[ratio]%;
for portrait:
肖像：
width:[ratio]%;
height:0;
padding-top:100%;
You need to determine which side is longer and accept this dimension as 100% then calculate [ratio] - percentage of shorter dimension in relation to 100% longer dimension. Then use the one of solutions above.
您需要确定哪一边较长并接受该尺寸为 100%，然后计算 [ratio] - 较短尺寸相对于 100% 较长尺寸的百分比。然后使用上述解决方案之一。
回答by daniel
I had the same problem for quite some time, my solution was giving the style lines of: min-height. This opens the div to the height given if there is no elements inside. The height can get bigger with the more elements inside, but not smaller.
很长一段时间我都遇到了同样的问题，我的解决方案是给出以下样式行：min-height。如果里面没有元素，这会将 div 打开到给定的高度。内部元素越多，高度可以变大，但不会变小。
Example code:
示例代码：
.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;
}
code gotten from https://www.w3schools.com/cssref/pr_background-attachment.asp
从https://www.w3schools.com/cssref/pr_background-attachment.asp 获取的代码
回答by Bestin John
If it is the only divelement in the body use the following style to to make it occupy the full-width.
如果它是divbody 中唯一的元素，则使用以下样式使其占据全角。
.bordertop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image:
url('../images/top_border.png');
}
回答by Ash
I couldn't get my background showing in the div even with the width set up. Turns out i had to put "../" in the url section then it showed the picture i was struggling for quite a while.
即使设置了宽度，我也无法在 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;
}
