HTML和CSS'浮动'属性

如果我不使这一点容易理解，请耐心等待。这里是我的代码和一个图片链接，我将用它来尝试解释我的问题。代码如下：的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

基本上就是我想要做的是有一个背景图像我的标题，你会在图像中看到。在该背景图像之上，我想要一个白色的透明背景，以便正确看到黑色文本。我有这个想法，除了一个，列标志。因为我浮动它，所以白色透明背景不会扩展到导航栏，如图所示。

如果任何人都可以想到另一种方式来定位标志，使文本仍然可以在相同的地方或至少接近它，我将不胜感激。

来源

2017-09-13 PoseidonofSea

我不知道我知道了。唯一浮动的是img，根据屏幕截图，它位于屏幕上的正确位置。那么你是否遇到过“白色透明”（原文如此）背景？ –

@PoseidonofSea你有任何地方托管这个网站，或者你可以用你的代码创建一个小提琴吗？ –

我有网站托管。它的网址是：http：//christiaanblom.coolpage.biz/The_Hero_%20Compendium.html 它的任务，这就是为什么它看起来业余。我仍在学习 – PoseidonofSea

-1

编辑： 好，我看到了你的网站，现在，一种解决方案是h3元素后添加<div class="clearfix">。然后你的作风，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和伸展它覆盖容器块，这是你的头;）

来源

2017-09-13 07:13:24

不幸的是，这并没有奏效。我的文件的其余部分跳入该区域，因为它的位置是绝对的。 – PoseidonofSea

自发布您的网站以来，我的答案已更新。希望工程！ –

HTML和CSS'浮动'属性

回答

相关问题