<分区>
<分区>
大家下午好
如果我没有让这容易理解，请多多包涵。这是我的代码和指向我将用来尝试解释我的问题的图像的链接。代码如下: 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
基本上我想要做的是为我的页眉添加一个背景图像，您将在图像中看到它。在该背景图像之上，我想要一个白色透明背景，以便可以正确看到黑色文本。我知道这一切，除了一个，专栏标志。因为我 float 它，所以白色透明背景不会延伸到导航栏，如您在图片链接中所见。
如果有人能想出一种替代方法来放置 Logo ，以便文本仍然可以位于同一位置或至少靠近它，我将不胜感激。
最佳答案
编辑:
好的，我现在看到了您的网站，一个解决方案是添加 <div class="clearfix">在h3之后元素。
然后你设计这个div :
.clearfix{
clear: both;
}
第一个答案:
如果我理解你的问题，你只需要你的白色背景覆盖你的标题。由于您的 header 是 position: relative ，下面的代码应该可以工作:
header div{
background-color: rgba(255,255,255,0.80)
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
它只是将您的白色层设置为 position:absolute并拉伸(stretch)它以覆盖容器 block ，这是您的标题；)
关于html - HTML 和 CSS 'float' 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46190752/