使用CSS的圖像專用導航欄的最佳做法

我想創建一個帶有ul元素的導航欄，其中導航欄上的每個項目都是無文字的僅限圖片的鏈接。所以我這樣設置：使用CSS的圖像專用導航欄的最佳做法

<ul> 
    <li><a href="./"></a></li> 
</ul>

然後我意識到我真的不知道如何讓圖像在那裏。我想到了兩個想法，但他們每個人都有問題：

把一個img標籤的錨點。這不是很好的內容/設計分離，而且，如果我想在用戶懸停在它上面（我這樣做）時改變圖像，它會變得更加複雜。
使用CSS背景圖像，但現在我必須給錨點的寬度和高度等於圖像的尺寸，迫使我在每次更改圖像時修改代碼。

僅限圖片的navbars非常常見，那麼是否有標準的方法來執行此操作？

來源

2015-08-28 Jack M

我使用的CSS樣式，它乾淨，性能更好 - 如果這些圖像是設計的一部分，不會動態改變 –

如果僅限圖像的導航欄如此常見，就像您說的那樣，他們呢？使用檢查員，看看他們是如何做的。如果我必須這樣做，我會使用CSS。 – Jeff

你不想添加img標籤，你不想使用背景圖片，你不想給寬度，高度！沒有任何離開的朋友..！除了字體圖標！現在，即使我很好奇，你會怎麼做 –

使用它們，使用圖像的透明度和bacground形象，所以你可以改變的img懸停和透明IMG將延伸<a>標籤爲您提供：

<a><img src="some-image.jpg" /></a>

和CSS是這樣的：

a img{ 
    opacity:0; 
} 
a{ 
    background-image:url(some-image.jpg); 
} 
a:hover{ 
    background-image:url(some-other-image.jpg); 
}

來源

2015-08-28 08:31:12

'-someprefix-'不是必須的。只有IE8不支持不透明，但你可以用'filter'來模仿它的行爲。但是，來吧，我們不會支持IE8了，我們是否;）另外;如果將元素的不透明度設置爲0，則背景圖像也將不可見。所以當你試圖現在構建它時，你將不得不堆疊一些元素來達到效果。 – giorgio

@giorgio是的，前綴是沒有必要的，他們是可選的，這就是爲什麼我不打擾他們寫。不透明度：再次檢查代碼，'img'上設置了「opacity」，但'a'標籤（父級）上設置了背景圖像，因此不會被感染 –

對不起，您是對的，我最後的評論可以被忽略;）但我仍然站在-prefix-部分，因爲甚至沒有不透明的前綴...另請參見[caniuse]（http://caniuse.com/#feat=css-opacity）（儘管也許有一箇舊的firefox版本，沒有人使用了））） – giorgio

我使用它，這些方法：

CSS

ul{ 
    display:inline-block; 
    width:350px; 
    height:150px; 
} 
ul li{ 
    display:block; 
} 
ul li a, ul li{ 
    display:inline-block; 
    width:100%; 
    height:100%; 
} 
ul li.fb a{ 
    background:url(http://placehold.it/350x150) no-repeat left center; 
} 
ul li.tw a{ 
    background:url(http://placehold.it/350x150) no-repeat left center; 
} 

<ul> 
    <li class="fb"><a href="http://facebook.com"></a></li> 
    <li class="tw"><a href="http://twitter.com"></a></li> 
</ul>

而且你可以把精靈所有這些圖片等

http://jsfiddle.net/sthAngels/842d4493/

來源

2015-08-28 08:47:18

最簡單的方法來實現，這是插入上懸停圖像（這當然會與正常圖像具有相同的尺寸），並在其頂部堆疊一個元素，該元素將具有「正常狀態」圖像作爲背景。然後在懸停時，隱藏堆疊元素以顯示懸停圖像。錨本身現在本身將具有圖像尺寸，堆疊元件也是如此。

HTML：

<ul> 
    <li><a href class="link1"><img src="link1-hover-image.png"><span></span></a></li> 
    <li><a href class="link2"><img src="link2-hover-image.png"><span></span></a></li> 
    <li><a href class="link3"><img src="link3-hover-image.png"><span></span></a></li> 
</ul>

CSS：

a { position: relative; } 
a img { vertical-align: bottom; } /* little hack for correct placement */ 
a span { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } 
a:hover span { opacity: 0; } 

.link1 span { background-image: url(link-1-image.png); } 
.link2 span { background-image: url(link-2-image.png); } 
.link3 span { background-image: url(link-3-image.png); }

DEMO

但像大家說;儘可能使用普通的CSS。更快，更容易維護。所以只有在實際上不可能使用CSS來設計按鈕時才使用它。

來源

2015-08-28 08:56:04 giorgio

使用CSS的圖像專用導航欄的最佳做法

回答

相關問題