Question

我（当然）在我的网站上使用svg精灵来处理各种元素。当svg不可用时，我也正在实施png后备，我还想为视网膜显示器添加@ 2x png版本。

当我这样做时，我似乎无法包含图像的特定部分（在本例中为徽标），因为background-size选择器只能强制整个精灵进入标志区。

我已附上4张图片以显示不同的结果。

如何让@ 2x图像正确填充空间？

CSS

.logo {
    background-image: url(images/ui-sprite.svg);
    width: 80px;
    height: 30px;
    text-indent: -9999px;
    display: block;
}

.no-svg .logo {
    background-image: url(images/ui-sprite.png); }


@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    .no-svg .logo {
        background-image: url(images/ui-sprite@2x.png);
    }
}

SVG：http://i.stack.imgur.com/ezjfD.png

PNG后退：http://i.stack.imgur.com/isVrC.png

@ 2x PNG Fallback（Retina）：http://i.stack.imgur.com/pMqEM.png

@ 2x PNG Fallback（Retina）以及其他CSS：http://i.stack.imgur.com/SXOUI.png

使用精灵时@ svg的@ 2x视网膜后备

0 个答案: