css - 视网膜 Sprite 和高对比度模式

Question

所以我知道这是一个棘手的问题。我遇到过 Sprite 和高对比度模式的问题，基本上可以用如下代码解决:

.icon:before {
  content: url(icons.png);
  position:relative;
  left:-2px;
  top:-109px;
}

.icon {
  width:17px;
  height:18px;
  display:inline-block;
  overflow:hidden;
}

这很好。它确实有效。但是，如果我更改视网膜的内容 url，图像会大得多，因此会失败。

有什么方法可以两全其美吗？

Answer 1

如果您想以与非 Retina 图像相同的方式显示您的图像，您需要设置图像的宽度。

这里有一些例子:

这是一个最小宽度的例子(响应式设计)桌面 CSS:

.site-header {
    position: relative;
    background: url('assets/images/XXXX.jpg') 0px 0px no-repeat;
    height: 155px;
    background-size: cover;
    background-position:center;
} 

Retina 响应式设计

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 768px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 768px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 768px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 768px),
only screen and (                min-resolution: 192dpi) and (min-width: 768px),
only screen and (                min-resolution: 2dppx)  and (min-width: 768px) { 

 .site-header
    {
        position: relative;
        background: url('assets/images/GBBO_BG_1536_R.jpg') 0px 0px no-repeat;
        height: 148px;
        background-size:cover;
    } 

    /*  Iphone P */
    #header #logo_home {
        width: 154px;
        height: 102px;
        background: url('assets/images/GBBO_logo_1536_R.png') 0px 0px no-repeat;
        background-size: 100% auto;
                }
}

要去除响应效果，去掉“and (min-width: 768px)”