Каков наилучший способ сделать спрайт встроенного изображения? - PullRequest
Новая
       0

Каков наилучший способ сделать спрайт встроенного изображения?

1 голос
/ 10 марта 2012

После некоторого исследования я обнаружил, что могу растянуть прозрачный GIF до размера спрайта и установить фон для спрайта с смещением.

См .: http://jsfiddle.net/iambriansreed/6bT3j/embedded/result

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP//////zCH5BAEHAAAALAAAAAABAAEAAAICRAEAOw=="
    width="30" height="30" style=" background: -88px -223px 
        url('http://ssl.gstatic.com/gb/images/j_f11bbae9.png');"
>

Это лучший и самый чистый способ создания встроенного спрайта изображения?

Ответы [ 2 ]

1 голос
/ 10 марта 2012

Ниже находится главная страница Google CSS Sprite (вы не увидите, что прозрачный GIF не требуется).

Если изображение имеет семантическое значение, например, это логотип или картинка, которая занимает центральное место в статье, то это лучший метод для использования.

Но если загружаемое изображение не имеет семантического значения, например, это навигационное изображение, которое предназначено только для оформления, тогда вы можете использовать CSS для загрузки изображения вместо тега изображения.

Google CSS Sprite

enter image description here

HTML 

<div class="nojsv" id="logocont" style="left: 0px; position: absolute; visibility: visible; ">
  <h1>
    <a id="logo" href="https://www.google.co.uk/webhp?hl=en" title="Go to Google Home">
      Google
        <img width="167" height="389" src="/images/nav_logo104.png" alt="">
    </a>
  </h1>
</div>

CSS 

#logo {
  display: block;
  height: 41px;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 114px;
}
0 голосов
/ 13 марта 2012

Я считаю, что мой способ, описанный выше, является лучшим способом загрузки спрайта изображения.

Я добавил только CSS, необходимый для просмотра этого спрайта, и оставил все остальные CSS в таблице стилей, где он принадлежит.*

Хотя истинным источником изображения является прозрачный GIF, независимо от того, используете ли вы фактический GIF или эквивалент данных в моем примере выше, изображение спрайта устанавливается в качестве фона и смещения для выявления необходимого спрайта.

Позволяет использовать тег img по прямому назначению: например, атрибут alt и встроенное отображение тега по умолчанию.

Один тег изображения с определенным встроенным css очень полезен.меньше html чем что-либо еще, что я видел, и семантический html может быть добавлен где необходимо.

...