所以我知道这是一个棘手的问题。我遇到过 Sprite 和高对比度模式的问题,基本上可以用如下代码解决:
.icon:before {
content: url(icons.png);
position:relative;
left:-2px;
top:-109px;
}
.icon {
width:17px;
height:18px;
display:inline-block;
overflow:hidden;
}
这很好。它确实有效。但是,如果我更改视网膜的内容 url,图像会大得多,因此会失败。
有什么方法可以两全其美吗?
最佳答案
如果您想以与非 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)”
关于css - 视网膜 Sprite 和高对比度模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19176033/