如何使背景圖像適合包含錨點元素？

我試圖設計一個圖像背景的鏈接，問題是如果圖像太大，我如何適應使用CSS的錨點的寬度和高度？如何使背景圖像適合包含錨點元素？

<a href="#"></a> 
<style> 
a 
{ 
    display: block; 
    padding: 5px 12px; 
    border: 1px solid black; 
    width: 10px; 
    height: 10px; 
    background-image: url('/Scripts/images/downarrow_blue.png'); 
    } 
</style>

TIA，麗娜在CSS 2.1

來源

2010-04-21 Lina

背景圖片不能調整大小，但CSS 3支持background-size屬性已經不被廣泛實施。

background-size: 10px 10px;

明顯的替代方案是隻使用一個<img>標籤：

<a href="#"><img src="mybg.png" alt="" style="width:10px; height:10px" /></a>

但你可能因爲不這樣做也無妨這樣一個道理，對不對？

其他替代方案可能是

的<a>元調整到圖像的大小，而不是。
在本地調整圖像大小並將其上傳到不同的文件名下。
使用服務器端預處理器（如PHP或ASP）以您想要的大小傳送圖像。

來源

2010-04-21 10:09:48

yes我實際上有一個使用它作爲背景的理由，因爲我必須更改懸停上的圖片，謝謝:) – Lina 2010-05-11 09:45:53

對於我來說background-size是解決方案，但我也必須使用寬度和高度屬性。 – erdomester 2013-04-13 07:34:41

如果您不知道圖像的大小（或任何其他您正在使用的元素），則代碼「background-size：100％100％;」應該管用。 – 2014-03-17 18:27:37

如何使背景圖像適合包含錨點元素？

回答

相關問題