流體div圍繞圖像

我想要在網站徽標下有一個形狀，但它需要從兩側繼續橙色酒吧，所以它會看起來像一塊。這是我迄今爲止創建的the preview。流體div圍繞圖像

我在這上面呆了幾個小時。請你有想法如何做到這一點，並保持責任？謝謝！

這是它應該是什麼樣子。 enter image description here

來源

2015-05-30 the Hawxie

最簡單的方法是使用一個背景圖像（PNG噸ype帶有透明部分），並且需要相應地設計HTML。 –

當然，但如何？我嘗試過表格設計，我試圖製作一個寬的背景圖片，並用百分比設置正確的位置 - 這是最接近的解決方案，但它調整大小（改變位置）與其他元素略有不同... :( –

將背景顏色.test設置爲背景圖像中的純色，然後正確定位。最後將徽標設置爲position: absolute（不要擔心它不會移動，除非你給它一個位置），然後設置z-index: 2;將其提升到高於波形。

（Demo）

.test { 
    position: relative; 
    background-image: url('//jumbo.elique.cz/img/navbar-bottom.png'); 
    width: 345px; 
    height: 34px; 
    top: 64px; 
    background-color: #0b1b33; 
} 
.navbar-brand { 
    position: absolute; 
    z-index: 2; 
}

現在，這可能會導致背景顏色掩蓋了一些在後臺總線，來解決這個問題，你可以用相同的背景 - 包裹資產淨值在100px高大的div色彩，使得這個更均勻

（Demo）

.wrap { 
    background-color: #0b1b33; 
    height: 100px; 
}

來源

2015-05-30 19:04:05

我認爲這會很難，我會殺了設計師！:)它看起來沒問題。我會使用它，我相信沒有更好的解決方案。非常感謝您的寶貴時間！ –

流體div圍繞圖像

回答

相關問題