Question

我有一个单独的png，上面有各种社交登录按钮图像。我可以通过使用以下CSS类来让它们显示我想要的图像：

.sign-in-with-facebook {
    width: 430px;
    height: 88px;
    background-image: url("/static/social-media-icons/social-sign-in-buttons.png");
    background-position: -184px -110px;
}
.sign-in-with-google {
    width: 430px;
    height: 88px;
    background-image: url("/static/social-media-icons/social-sign-in-buttons.png");
    background-position: -184px -401px;
}
.sign-in-with-twitter {
    width: 430px;
    height: 88px;
    background-image: url("/static/social-media-icons/social-sign-in-buttons.png");
    background-position: -184px -207px;
}

然后添加如下所示的div将使我的图像显示在我的页面上：

<div class="sign-in-with-twitter"></div>

首先，这是一种合理的方式来处理像这样的“图纸”吗？

其次，我的主要问题是我希望然后缩小这些按钮以使它们更小，因为它们在原始png中非常大。我尝试过使用background-size，max-width，max-height，将它们包装在另一个div中，等等到目前为止没有运气。非常感谢帮助！

Answer 1

是！这是一种名为Spriting
最好的方法是使用一些光栅编辑工具（如photoshop）缩小尺寸

缩放div背景图像

1 个答案: