17

我在页面顶部创建了<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>但我不想这样做。我该如何解决这个问题？

4

9 回答 9

17

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

.bordertop 
{
    background-image: url(../images/top_border.png);
    background-repeat: repeat-x;    
    height: 100px;
    width: 100%; /* may not be necessary */
}
于 2012-08-15T03:21:55.853 回答
3

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

.bordertop {
    background-image: url(../images/top_border.png);
    background-repeat: repeat-x;
    width: 200px;
    height: 100px;
}
于 2012-08-15T03:22:36.370 回答
2

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

你也可以给padding-top:1px

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

看演示

于 2012-08-15T03:23:50.517 回答
0

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

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

于 2012-08-15T03:30:59.800 回答
0

即使设置了宽度，我也无法在 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;
}
于 2020-04-23T17:36:28.807 回答
0

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

.bordertop  {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-image: 
   url('../images/top_border.png');
}
于 2018-08-27T07:26:45.913 回答
0

我很长一段时间都遇到同样的问题，我的解决方案是给出以下样式线：最小高度。如果里面没有元素，这会将 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获得的代码

于 2017-04-17T18:21:34.630 回答
0

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

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

于 2021-11-24T15:24:22.507 回答
0

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

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

肖像：

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

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

于 2017-02-14T02:30:32.130 回答