0

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

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

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

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

有没有两全其美的？

4

1 回答 1

0

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

这里有一些例子：

这是最小宽度（响应式设计）桌面 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)”

于 2013-10-04T08:50:29.603 回答