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'浮動'屬性

回答

相關問題