如何在background css属性中拉伸图像

Question

我在标题中显示了一个带有以下css属性的徽标：

background: url("images/ogo_b_s.gif") no-repeat scroll left top transparent
height: 92px;
width: 300px;

问题是我的原始图像质量很高（4325 X 1450）。但是，要使此图像适合上述css的宽度和高度，我必须将图像缩小到（257 X 87），这会显着降低图像的质量。这么多，甚至图像中的字体开始看起来很奇怪。

此图像具有透明背景，并放在另一个图像的顶部。

我想知道是否有某种方法可以不缩小图像并使其适合上述css？

Answer 1

两件事：

1. 没有CSS比例图像。它做得很差。使用一些程序缩放图像，该程序旨在根据您自己的尺寸进行缩放。然后CSS不需要做任何事情。
2. 4325 x 1450很大！你希望有人必须下载整个东西只是为了看到它的规模很小？如果您按照＃1中的建议重新缩放图像，它将使用户不​​必加载整个巨大的图像（并节省一些带宽）。

Answer 2

您应该专门创建背景图像以适合您在此处使用的区域;不要依赖浏览器来做到这一点。

当你这样做时，你也可以尝试使用带有alpha透明度的PNG，当透明度成为问题时，它往往比GIF更好地缩放 。