在HTML鏈接上放置背景圖片

Question

我試圖讓社交圖標通過CSS顯示在頁腳上。

HTML

<div class="copyright container"> 
    <div class="sicons"> 
    <a class="copy1" href="#"></a> 
    <a class="copy2" href="#"></a> 
    <a class="copy3" href="#"></a> 
    <a class="copy4" href="#"></a> 
    <a class="copy5" href="#"></a> 
    </div> 
</div> 

CSS

.container { 
    overflow: hidden; 
    margin: 0em auto; 
    width: 1000px; 
} 
.copyright { 
    overflow: hidden; 
    padding: 1em 0em; 
    border-top: 1px solid rgba(255, 255, 255, 0.08); 
} 
.copyright a { 
    text-decoration: none; 
} 
.copyright img { 
    vertical-align: middle; 
    width: 70px; 
    height: 70px; 
} 
.copyright a.copy5 img { 
    width: 50px; 
    height: 50px; 
} 
.copyright a.copy1 { 
    background: url(1.png) center no-repeat; 
} 
.copyright a.copy2 { 
    background: url(2.png) center no-repeat; 
} 
.copyright a.copy3 { 
    background: url(2.png) center no-repeat; 
} 
.copyright a.copy4 { 
    background: url(4.png) center no-repeat; 
} 
.copyright a.copy5 { 
    background: url(5.png) center no-repeat; 
} 

的圖像不會與這樣的代碼顯示。他們會顯示當我添加

.copyright a.copy1, .copyright a.copy2, .copyright a.copy3, .copyright a.copy4, .copyright a.copy5 { 
    display: inline-block; 
    text-decoration: none; 
    margin:15px; 
    text-indent:-9999px; 
    width:50px; 
    height:50px; 
} 

但是，圖像出現扭曲與此代碼。我在哪裏出錯了？

Answer 1

這是一個開始如何做。

.copyright a { 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    height: 80px; 
 
    width: 80px; 
 
} 
 
.copyright a.copy2, .copyright a.copy4 { 
 
    background: url(http://lorempixel.com/80/80/sports/); 
 
} 
 
.copyright a.copy1, .copyright a.copy3, .copyright a.copy5 { 
 
    background: url(http://lorempixel.com/80/80/); 
 
}

<div class="copyright container"> 
 
    <div class="sicons"> 
 
    <a class="copy1" href="#"></a> 
 
    <a class="copy2" href="#"></a> 
 
    <a class="copy3" href="#"></a> 
 
    <a class="copy4" href="#"></a> 
 
    <a class="copy5" href="#"></a> 
 
    </div> 
 
</div>

如果不同的圖像大小，這表明，仍然保持錨大小相等。

.copyright a { 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    height: 80px; 
 
    width: 80px; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-size: contain; 
 
} 
 
.copyright a.copy2, .copyright a.copy4 { 
 
    background-image: url(http://lorempixel.com/80/160/sports/); 
 
} 
 
.copyright a.copy1, .copyright a.copy3, .copyright a.copy5 { 
 
    background-image: url(http://lorempixel.com/160/80/); 
 
}

<div class="copyright container"> 
 
    <div class="sicons"> 
 
    <a class="copy1" href="#"></a> 
 
    <a class="copy2" href="#"></a> 
 
    <a class="copy3" href="#"></a> 
 
    <a class="copy4" href="#"></a> 
 
    <a class="copy5" href="#"></a> 
 
    </div> 
 
</div>

在這裏，圖像填充其容器的背景，這當然不夾它們，在一些高度，一些在寬度，因爲它們被設置爲保持它們的比率。

.copyright a { 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    height: 80px; 
 
    width: 80px; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-size: cover; 
 
} 
 
.copyright a.copy2, .copyright a.copy4 { 
 
    background-image: url(http://lorempixel.com/80/160/sports/); 
 
} 
 
.copyright a.copy1, .copyright a.copy3, .copyright a.copy5 { 
 
    background-image: url(http://lorempixel.com/160/80/); 
 
}

<div class="copyright container"> 
 
    <div class="sicons"> 
 
    <a class="copy1" href="#"></a> 
 
    <a class="copy2" href="#"></a> 
 
    <a class="copy3" href="#"></a> 
 
    <a class="copy4" href="#"></a> 
 
    <a class="copy5" href="#"></a> 
 
    </div> 
 
</div>

Answer 2

首先，你.copyright img類未在本例中使用。爲了保持您的代碼清潔，我建議刪除它，如果你沒有在.copyright格內放置任何圖像。

毫無疑問，您需要設置width和height以使背景可見<a></a>。另外，我建議在您的<a>標籤中添加一個空的空格（ ），以確保它們會顯示在您的網頁中，因爲它們不是空的。

此外，display: inline-block;可以是至關重要的您的設置，但使用邊緣有這可能會導致一個爛攤子。如果您需要在鏈接中添加內容，則應在鏈接中使用填充或絕對定位元素。

需要任何進一步的幫助，我想獲得您的代碼JSFiddle，以及從谷歌等拍攝的一些照片作爲佔位符。

Answer 3

爲什麼不讓圖像成爲鏈接。嘗試是這樣的：

<div class="copyright container"> 
    <div class="sicons"> 
     <a class="copy1" href="#"><img src="1.png"></a> 
     <a class="copy2" href="#"><img src="2.png"></a> 
     <a class="copy3" href="#"><img src="3.png"></a> 
     <a class="copy4" href="#"><img src="4.png"></a> 
     <a class="copy5" href="#"><img src="5.png"></a> 
     </div> 
</div> 

，如果你想保持文本，你可以隨時標題您的圖像，使標題進入鏈接，當然不過。這很容易通過簡單地放置一個帶有鏈接標題的div並覆蓋在所選圖像上方來實現。

Answer 4

你可以試試這個，我比較喜歡把圖片放在：屬性後面。像這樣的圖片更加靈活，如果你改變寬度它會工作，她不得不高於圖片的寬度。然而，ProDexorite的答案是太好了:)

.copyright a { 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 80px; 
 
    width: 80px; 
 
} 
 

 
.copyright a:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    width: 80px; 
 
    height: 80px; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 

 
.copyright > .sicons > .copy2:after, 
 
.copyright > .sicons > .copy1:after, 
 
.copyright > .sicons > .copy3:after, 
 
.copyright > .sicons > .copy4:after, 
 
.copyright > .sicons > .copy5:after { 
 
    background: url(http://lorempixel.com/80/80/sports/); 
 
}

<div class="copyright container"> 
 
    <div class="sicons"> 
 
    <a class="copy1" href="#"></a> 
 
    <a class="copy2" href="#"></a> 
 
    <a class="copy3" href="#"></a> 
 
    <a class="copy4" href="#"></a> 
 
    <a class="copy5" href="#"></a> 
 
    </div> 
 
</div>