小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图像显示不正确

回答

相关问题