鏈接與圖片 - 如何顯示上面的鏈接，圖片鏈接的背景圖片

所以我有一個圖像鏈接：鏈接與圖片 - 如何顯示上面的鏈接，圖片鏈接的背景圖片

<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title=""> 
    <img src="../gs1.jpg" alt="YouTube" /> 
</a>

，並鏈接有一個背景圖片：

<style> 
    a { 
     z-index: 99999; 
     background-image:url('../[email protected]'); 
    } 
</style>

的背景圖像未被顯示。如果我將鏈接圖像的圖像鏈接空白，我確實會看到背景，只是一旦鏈接圖像可見，它就會阻止鏈接背景圖像。

是我要去的可能嗎？如果是這樣，任何意見將不勝感激。

來源

2014-02-27 Tim Aych

你想顯示兩個圖像，還是僅顯示背景圖像？ –

因爲如果你刪除'img'，你的'a'標籤將沒有'height'和'width'，因此它將失敗... –

你試圖把背景放在的頂部，如果位於具有背景的容器內，則不可能。如果你想達到同樣的效果，你可以在不同的容器位置內完成兩幅圖像，然後你可以按照你想要的方式來安排它們。 – Alex

我做了一個工作例子給你：

HTML：

<a href="#"> 
    <img src="https://cdn3.iconfinder.com/data/icons/social-circle/512/social_4-128.png" alt="YouTube" /> 
</a>

CSS：

a { 
    width: 200px; 
    height: 200px; 
    display: block; 
    z-index: 99999; 
    background:#000 url('http://jsfiddle.net/img/logo-white.png'); 
}

FIDDLE

來源

2014-02-27 17:39:20

背景圖像是什麼顧名思義 - 一個背景圖像 - 因此它不能在元素的內容之上繪製。

查看您的代碼我假設您想要在縮略圖頂部顯示播放按鈕。我假設播放按鈕是透明的。因爲這對於::after僞元素正確位置和大小本身產生的基礎

a { 
    display: inline-block; 
    position: relative; 
} 

a:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    background-image: url('../[email protected]'); 
}

錨的相對定位是非常重要的：

我會用這個CSS。

否z-index是必需的::after僞元素位於文檔流中的內容之後，因此通過上述CSS呈現在內容之上。

我強烈建議將類分配給有問題的錨點，因爲您懷疑您希望在文檔中的每個a都顯示播放圖像。

HTML很好，因爲它是。

來源

2014-02-27 18:02:12

鏈接與圖片 - 如何顯示上面的鏈接，圖片鏈接的背景圖片

回答

相關問題