0

我在使用 CSS 显示小图像时遇到问题。我正在尝试显示一个图标大小的图片（图片有几个像素边框，所以它不是边缘到边缘）但是图像本身在显示时没有居中，并且它的一部分被右侧和底部隐藏周围盒子的阴影。我喜欢阴影的外观，但我认为图像太小了，在调整大小时不能忽略盒子的阴影。这是我的CSS。有任何想法吗？

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

1 回答 1

0

试试这个，调整背景位置值，直到你的图像定位正确：

.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-09T03:37:09.037 回答