敏感的css sprite视网膜-Java 学习之路

我在最后几天读了很多关于这个话题的内容，但我找不到解决方案 . 我有两个精灵套装，一个是低质量的普通显示器，另一个是高质量的视网膜显示器 .

我的问题是，我的网站必须响应，图形应根据浏览器窗口调整大小 . 但是使用 background-size 属性，我似乎无法告诉浏览器调整精灵的大小 . 这是我到目前为止所得到的：

#logo-img {
  max-width: 100%;
  text-indent: -9999px;
  height: 85px;
  width: 360px;
  background-image: url('/images/sprites-sa026cef942.png');
  background-position: 0 -2609px;
  background-repeat: no-repeat;
  overflow: hidden;
  outline: 0 none !important;
  display: block;
  white-space: nowrap;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) {
    #logo-img {
      background-image: url('/images/sprites-retina-se61e802cf4.png');
      background-position: 0 -2601px;
      -webkit-background-size: 360px, auto;
      -moz-background-size: 360px, auto;
      -o-background-size: 360px, auto;
      background-size: 360px, auto;
    }
}

HTML是

<a href="#" id="logo-img">
  <h1>My logo text</h1>
</a>

除移动设备或调整浏览器窗口大小外，一切正常 . 徽标被剪切，并且不会调整大小到浏览器窗口 . 我正在玩 max-width: 100%; 和 height: auto; ，但这只会影响轮廓，而不会影响其中的精灵 .

希望有人知道解决方案 . 它不必与IE8兼容，但它会很好;）

EDIT 在使用精灵之前，我使用 background-size: contain; 来确保背景图像的大小调整为元素的大小：

#logo-img {
  background:url(../images/sprites-retina/logo.png) no-repeat center center;
  background-size: contain;
  max-width: 100%;
  text-indent:-9999px;
  height: 85px;
  width: 360px;
  overflow: hidden;
  outline: 0 none !important;
  display: block;
  white-space: nowrap;
}

这很好用，但后来我不能使用spritesheet . 也许这清楚地说明了我的意思 .

EDIT2

我做了一个小提琴http://jsfiddle.net/euvRD/2/

1 回答

3
我想你需要删除 background-size 行中的逗号，你可能也希望将高度设置为 85px ：
```
-webkit-background-size: 360px 85px;
-moz-background-size: 360px 85px;
-o-background-size: 360px 85px;
background-size: 360px 85px;
```
但是我想这里的逗号是主要问题 . 这对你有帮助吗？
回复于 2024-04-25T10:18:54+08:00

敏感的css sprite视网膜

1 回答

相关问题