固定標題與固體bg顏色和透明bg標誌

剛剛一點的CSS幫助請。我需要開發基於PSD設計的頭，但不知道從哪裏開始。這是一個固定標題，全寬和125px高，白色背景。它後面將是一個500px高的滑塊。該網站的徽標將在1000px居中包裝內，具有透明背景，以便滑塊圖像可以透過。這裏是設計的捕獲：固定標題與固體bg顏色和透明bg標誌

screen capture

任何想法如何可以做到這一點嗎？

來源

2015-04-22 Adrian

難道你不能只使用普通的標誌圖像，然後給它一個厚實的白色邊框，然後完全繞半徑？而不是做一個完整的塊div只是分割它，讓圖片看到背景。 – Andrew

可能的，我可以有1000px的包裝與div的「headleft」有logo圖像作爲bg圖像，div的「headright」填充寬度的其餘部分，但然後填充空間任何一邊的包裝 – Adrian

編輯： 我會創建兩個div。一個帶有沒有背景色的徽標，另一個帶有背景色。看看下面的代碼。確保當您更改標頭左側的寬度時，您在標頭右側更新它。

HTML：

<div class="header"> 
    <div class="header-left logo"><img src="logo.png" alt="logo" /></div> 
    <div class="header-right"></div> 
</div>

CSS：

.header { 
    position: relative; 
    display: inline-block; 
    width: 100%; 
    line-height: 0; 
    font-size: 0; 
} 

.header-left { 
    display: inline-block; 
    width: 100px; 
    height: 125px; 
} 

.header-left { 
    display: inline-block; 
    width: calc(100% - 100px); 
    width: -webkit-calc(100% - 100px); 
    height: 125px; 
    background: #ffffff; 
}

原文： 我會創建PNG具有標誌中間的透明與1000像素的左側和右側，這是白人和使用圖像作爲水平居中的背景。由於它只是白色，它不應該是一個大文件。

來源

2015-04-22 22:15:44 kel

我認爲這是因爲它似乎是最簡單的解決方案，但客戶端理想地希望這個偏移量位於1000px居中列左邊的左側。 – Adrian

@阿德里安，我最初誤解了你。我已經更新了我的答案。 – kel

好吧，這將工作在1000px的包裝，但。頭將不得不有白色背景去屏幕的兩個邊緣（全寬），然後徽標將不再是透明的。 – Adrian

固定標題與固體bg顏色和透明bg標誌

回答

相關問題