小CSS圖像顯示不正確

我在使用CSS顯示小圖像時出現問題。我試圖顯示一個圖標大小的圖片（圖片有幾個像素邊框，因此它不是邊緣到邊緣），但是圖片本身在顯示時不居中，並且其一部分被右下角隱藏周圍箱子的陰影。我喜歡陰影的外觀，但我認爲圖像非常小，盒子的陰影在尺寸上不能忽略。這是我的CSS。有任何想法嗎？小CSS圖像顯示不正確

.delete_button { 
    background: url('trash_can.png'); 
    background-repeat: no-repeat; 
    width: 20px; 
    height: 24px; 
    display: inline; 
}

來源

2013-04-09 Keith Cox

什麼是垃圾桶圖像的尺寸？ – Jaxkr 2013-04-09 03:36:59

整體圖像是20px x 24px。這包括圖像周圍的邊框，因此圖像本身不會一直走到邊緣。下面的答案很好。我只需要稍微調整一下數字。 – 2013-04-09 03:53:17

試試這個，調整背景位置值，直到你的形象正確定位：

.delete_button { 
    background: url('trash_can.png'); 
    background-repeat: no-repeat; 
    width: 20px; 
    height: 24px; 
    display: inline; 
    background-position  : -3px -4px; 
}

擴展在這個遠一點，你可能會想嘗試所有的小圖像添加到一個矩陣樣式的圖標圖像。然後，您可以使用寬度，高度和背景位置僅選擇想要的圖像。這將允許您的所有圖標作爲單個文件一次加載，從而減少互聯網流量。當需要「新」圖標時，它將被緩存並立即可用。

background-image: url("icons.png"); 
background-position: 30px 40px; /* Use these values to select your small image contained in your large image */ 
background-repeat : repeat; 
width   : 20px;  /* or however large your icon is */ 
height   : 24px;  /* or however large your icon is */

來源

2013-04-09 03:37:09 rrtx2000

背景位置數字效果很好。謝謝。我喜歡將所有圖標放入一個文件的想法。我將不得不在稍後嘗試。 – 2013-04-09 03:55:47

小CSS圖像顯示不正確

回答

相關問題