Question

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

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

Answer 1

尝试此操作，调整背景位置值，直到图像正确定位：

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

进一步扩展这一点，您可能想尝试将所有小图像添加到矩阵样式的一个图标图像中。然后，您可以使用宽度，高度和背景位置选择所需的图像。这将允许您将所有图标作为单个文件一次加载，从而减少互联网流量。当一个＆＃34;新＆＃34;需要图标，它已经被缓存并立即可用。

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 */

小CSS图像无法正确显示

1 个答案: