Question

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

<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>内写一些文字但我不想这样做，否则不会出现{{1}}。我怎么能解决这个问题？

Answer 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 */
}

Answer 2

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

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

Answer 3

给div一个height:1px。这应该工作。否则，div为0px高，意味着您将看不到任何内容。

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

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

参见 demo

Answer 4

由于我上面的答案建议^^'因为它实际上没有大小，你需要将内容放入内部来调整大小或设置宽度/高度或填充css bordertop类，或者你可以把另一个空的内部它与设定的大小。我打算跳过这个答案，因为已有答案，但我只是想补充说宽度/高度不是你唯一的选择。

另一方面，哦，男人，这里发布的人很快我有时想知道它是一场比赛，奖品是什么，必须有一些，我想帮助其他人本身就是很棒的奖品。 :)当我开始输入时，还没有答案。

Answer 5

我发现的最好方法是：对于景观：

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

肖像：

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

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

Answer 6

我有相同的问题很长一段时间，我的解决方案是给出样式线：min-height。如果内部没有元素，则会将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

Answer 7

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

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

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

如果<div>为空，那么背景图像不会出现？</div>

8 个答案: