Спрайты

@Фаил · Регистрация: 01.06.2012

Author24 — интернет-сервис помощи студентам

Доброго времени суток! Назрел (как на зло появился) такой вопрос: заменял фоновые картинки на спрайты:

HTML5

1	<td width="40" height="40" style="background-image:url('/1/img/8-1.gif');">

на

HTML5

<td width="40" height="40" class="bkg-img81">
 
.bkg-img81 {
background: url('imgs/4.png') no-repeat -53px 0;
 width: 5px;
 height: 40px;
 display:block;
}

Собственно, высоту и ширину он берет со стилей, которые принадлежат только картинке. Как ему объяснить, что этого делать нельзя?

@Alorian · 21.06.2012, 13:46

Сообщение от Фаил

высоту и ширину он берет со стилей, которые принадлежат только картинке.

Ширина 5px и высота 40px становится вместо 40х40?
Если так, то все правильно. Фоновой картинке можно указать размер только так
http://htmlbook.ru/css/background-size
Но это не во всех браузераз работать будет.

В коде выше задается высота и ширина ячейки таблицы.
Для фоновой картинки указывается только позиция.

@Фаил · 21.06.2012, 14:03 **[ТС]**

все то правильно, но фоновый рисунок не повторяется, а ячейка с этими размерами остается маленькой, портя весь вид.

@Alorian · 21.06.2012, 14:11

Сообщение от Фаил

но фоновый рисунок не повторяется

Сообщение от Фаил

background: url('imgs/4.png') no-repeat -53px 0;

И еще. Если спрайты в файле с картинкой криво расположены, то могут возникнуть проблемы с повторением спрайта. Например могуть появиться большие промежутки между повторами из-за большой ширины всей картинки в этом месте.

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	21.06.2012, 13:46	2
	Сообщение от Фаил высоту и ширину он берет со стилей, которые принадлежат только картинке. Ширина 5px и высота 40px становится вместо 40х40? Если так, то все правильно. Фоновой картинке можно указать размер только так http://htmlbook.ru/css/background-size Но это не во всех браузераз работать будет. В коде выше задается высота и ширина ячейки таблицы. Для фоновой картинки указывается только позиция. 1

@Фаил 2 / 0 / 0 Регистрация: 01.06.2012 Сообщений: 23
	21.06.2012, 14:03 [ТС]	3
	все то правильно, но фоновый рисунок не повторяется, а ячейка с этими размерами остается маленькой, портя весь вид. 0

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	21.06.2012, 14:11	4
	Сообщение от Фаил но фоновый рисунок не повторяется Сообщение от Фаил background: url('imgs/4.png') no-repeat -53px 0; И еще. Если спрайты в файле с картинкой криво расположены, то могут возникнуть проблемы с повторением спрайта. Например могуть появиться большие промежутки между повторами из-за большой ширины всей картинки в этом месте. 0

Опции темы