如何隱藏圖像內容CSS3解決

在這個主題與模板怪物現場演示如何隱藏圖像內容CSS3解決

的this address我無法找到圖片地址在5個圖標頭！（HOME博客項目聯繫）

是什麼使用技術？我如何隱藏像這個主題的圖像地址？

來源

2013-06-23 shahriyar3

它看起來像是使用[Font Awesome]（http://fortawesome.github.io/Font-Awesome/） –

你能解釋一下嗎？ – shahriyar3

在每個項目的'：before'僞元素中，引用了一個字符（'.icon-home：before {content：「\ f015」;}'爲主標識）。使用了一種特殊的字體，它提供了這些字符的很好的版本。這不是傳統意義上的圖像。 – amon

在現代網頁設計，我們要做到兩件事（其中包括）：

最少的加載時間。減少請求資源的數量是實現這一目標的主要方式。爲了減少圖像的數量，可以使用spriting。
每個分辨率上的尖銳圖標。使用基於像素的格式無法輕鬆實現這一點。解決方案是使用SVG或字體等矢量格式。

該字體真棒項目幫助。它在unicode的私人使用部分提供了一個帶有圖標的字體。它還提供了CSS，你可以參考一下，它看起來像

... 
.icon-edit:before { 
    content: "\f044"; 
} 
.icon-share:before { 
    content: "\f045"; 
} 
.icon-check:before { 
    content: "\f046"; 
} 
.icon-move:before { 
    content: "\f047"; 
} 
...

在你的HTML，你可以再做

<nav><ul> 
    <li class="icon-home">  Home </li> 
    <li class="icon-envelope"> Contact </li> 
</ul></nav>

圖標會在:before pseudoelement插入。您可以對元素應用更多樣式。您鏈接到的演示會增加字體大小等。

此技術僅爲兩個文件提供了數百個漂亮的圖標，並且可以輕鬆地將它們包含到您的標記中。

來源

2013-06-23 11:36:18 amon

如何隱藏圖像內容CSS3解決

回答

相關問題