固定標題中的響應式透明標識

我想知道如何在附加圖像中實現效果。徽標是一種圖像，透明，但頂部導航仍有背景。固定標題中的響應式透明標識

因此，如果用戶向下滾動，徽標會根據圖片或背後的顏色「變化」。

我已經嘗試在主div（100％寬度和80px高度）內製作兩個div（徽標和鏈接）。如果標識寬度爲200像素，我如何確保正確的分區始終填充視口的其餘部分。

.mainnav{widht:100%;position:fixed;height:80px;} 
.logo {background:url(logo.png);float:left;} 
.links{width:???;background:#272727;float:right;}

欣賞任何幫助和看到替代方法。

website example

來源

2014-01-07 hoektoe

給百分比標誌和鏈接，這使得標識容器響應的寬度。

.logo{ 
width:20%; 
} 

.links{ 
width:80%; 
}

來源

2014-01-07 13:48:49

試試這個代碼：

CSS：

.mainnav{widht:100%;position:fixed;height:80px;} 
.logo {background:url(logo.png);float:left;width:20%;background-repeat:no-repeat:backg‌round-size:100% 100%;} 
.links{width:80%;background:#272727;float:right;}

來源

2014-01-07 13:48:59 Manoj

你將如何確保1）標誌不拉伸2）由於標誌是背景圖片不重複，其餘的將是什麼，並顯示爲空白。 3）如果20％小於200px，背景圖片標誌將會裁剪。糾正我，如果我錯了 – hoektoe

.logo {background：url（logo.png）; float：left; width：20％; background-repeat：no-repeat：background-size：100％100％;}試試這個.. – Manoj

所提出的解決方案中沒有在不同分辨率下工作。

最佳解決方案可能是將2000像素圖像作爲標題和溢出：隱藏。

謝謝

來源

2014-01-08 06:17:05 hoektoe

固定標題中的響應式透明標識

回答

相關問題