Question

我已经用一类徽标浮动了图像。我为h1和图像应用了背景颜色，但由于某种原因它没有出现。为什么会这样？我已浮动图像，因为文本显示在图像下方而不是图像的顶部。有没有办法解决它？

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Niconne);
 body {
    background: #e6e3d7;
    font-size: 16px;
}
header {
    background: #b47941;
    width: 95%;
    padding-left: 1%;
    margin: 0 auto;
}
.logo {
    width: 12%;
    height: 12%;
    float: left;
    background: green;
}
header h1 {
    display: inline-block;
    font: 300% 'Niconne', cursive;
    line-height: 200%;
    height: 0;
    color: white;
    margin-left: 2%;
    background: blue;
}
.clear {
    clear: both;
}
.search {
    display: inline;
    background: blue;
}

＆＃13;

<div class="container">
  <header>
    <img class="logo" src="https://placehold.it/500x300">
    <h1 class=""> Heading one </h1>
    <input type="search">
    <div class="clear"></div>
  </header>
</div>

＆＃13;

Answer 1

实际上背景颜色设置成功，但由于零高度而无法看到：

header h1 {
  height: 0;
}

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Niconne);

        body{
            background: #e6e3d7;
            font-size: 16px;
        }

        header{
            background: #b47941;
            width: 95%;
            padding-left: 1%;
            margin: 0 auto;
        }

        .logo{
            width: 12%;
            height: 12%;
            float: left;
            background: green;
        }

        header h1 {
            display: inline-block;
            font:300% 'Niconne', cursive ;
            line-height: 200%;
            color: white;
            margin-left: 2%;
            background: blue;
        }

        .clear{
            clear: both;
        }

        .search{
            display: inline;
            background: blue;
        }

＆＃13;

<div class="container">

        <header>
            <img class="logo" src="https://placehold.it/500x300" >
            <h1 class=""> Heading one </h1>
            <input type="search">
            <div class="clear"></div>

        </header>

        </div>

＆＃13;

Answer 2

标题h1 {... !important ...} 删除高度：0;

Answer 3

您应用于img标签的颜色实际上就在那里。它就在图像的正后方，所以你看不到它。如果您将padding: 25px应用于.logo课程，您将看到我的意思。

就h1而言，您已经给它height: 0，因此没有空间来显示背景颜色。

Answer 4

对于h1，背景无效，因为您将元素的高度设置为0，因此不会出现任何颜色。

对于您的img，背景无效，因为您前面有一张图片。

如果您想查看img的背景，可以为其添加填充

背景不适用于h1和浮动图像

4 个答案: