Question

下午好。

如果我不容易理解，请耐心等待。这是我的代码和图像的链接，我将用它来尝试解释我的问题。代码如下： HTML

<header>
<div>
    <a href="index.html"><img src="../images/columns.png" alt="columns">`</a>`
    <h2>The Compendium</h2>
    <h3>Of Greek Mythology</h3>
    </div>

CSS

header {
    position: relative;
    background-image: url(../images/1024px-Raffaello,_concilio_degli_dei_02.jpg)

}
header div{
    background-color: rgba(255,255,255,0.80)
}



header img {
    height: 100px;
    float: left;
    margin-left: 2em;
    margin-bottom: 1em;
    margin-top: 1em

}

header h2 {
    position: relative;
    padding-top: 1em;
    padding-left: 7.5em;
    font-size: 170%
}

header h3 {
    font-size: 120%;
    padding-left: 7.5em;

}

图片

https://pbs.twimg.com/media/DJiQWAgXkAAqmdP.jpg:large

基本上我想要的是为我的标题设置背景图像，您将在图像中看到。在该背景图像的顶部，我想要一个白色透明背景，以便可以正确地看到黑色文本。我知道这一切，除了一个，列标志。因为我漂浮它，白色透明背景不会延伸到导航栏，如图所示。

如果有人能想出另一种方法来定位徽标，以便文本仍然可以在同一个地方或至少靠近它，我将不胜感激。

Answer 1

修改： 好的，我现在看到了您的网站，一个解决方案是在<div class="clearfix">元素之后添加h3。然后设置此div：

的样式

.clearfix{
  clear: both;
}

第一个回答： 如果我了解您的问题，您只需要覆盖标题的白色背景。由于您的标题为position: relative，因此以下代码应该有效：

header div{
 background-color: rgba(255,255,255,0.80)
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
}

它只是将您的白色图层设置为position:absolute并将其拉伸以覆盖容器块，这是您的标题;）

HTML和CSS'float'属性

1 个答案: