Arhn - архитектура программирования

Почему положение фона CSS меняется при изменении высоты спрайта?

Что-то интересное происходит на моем сайте. Он находится в активной разработке, и я продолжаю добавлять и добавлять вещи в PNG-файл спрайта веб-сайта. Иногда я добавляю столько иконок и блоков, что НУЖНО изменить высоту изображения, но когда я это делаю, некоторые (НЕ ВСЕ!) элементы появляются в разных местах.

Например, у меня есть изображение PNG размером 900x900 пикселей. Я сопоставил стили CSS с правильными координатами, добавил 200 пикселей прозрачного пространства в нижней части изображения, а некоторые стили сообщают о разных позициях:‹ ломая вещи на веб-сайте. Поэтому каждый раз, когда я увеличиваю файл спрайта, мне приходится открывать различные файлы CSS и добавлять X пикселей (величину высоты, которую я добавил). Я даже добавил базовую линию в 1 пиксель в верхней части спрайта, чтобы быть уверенным, что я не меняю никаких позиций, а только высоту.

Я прочитал спецификацию даже в RFC, и начало системы координат находится в точке x = 0, y = 0, что является левым верхним углом изображения. Мне это не понятно :(

ОБНОВЛЕНИЕ: некоторые из контейнеров, которые дают мне ошибки, сделаны с положительными координатами, а не с отрицательными. Я до сих пор не могу себе объяснить, почему такое происходит.

ОБНОВЛЕНИЕ: Таким образом, спрайт находится по этому URL-адресу http://lucho.hoolwars.com/img/sprites.png

и вот несколько стилей, которые меняют координаты при изменении высоты спрайта

.job-summary {
width: 330px;
height: 45px;
background: transparent url(/img/sprites.png) -15px 435px;
cursor: default;
}

.popup-title {
background: url('../img/sprites.png') -425px -1077px transparent;
width: 275px;
color: black;
font-weight: normal;
}

.popup-close {
position: absolute;
background: url('../img/sprites.png') -771px -972px transparent;
right: -9px;
top: -22px;
width: 38px;
height: 38px;
z-index: 2;
cursor: pointer;
}

Каждый раз, когда я меняю высоту "sprites.png", эти координаты больше недействительны :|

html css sprite background-position
06.11.2013

  • мы можем увидеть ваш сайт ..? 06.11.2013
  • Боюсь, что нет, сейчас у меня есть только среда разработки, но я могу показать спрайт и пример CSS. 06.11.2013
  • да, пожалуйста - иначе люди могут только догадываться, в чем может быть проблема. 07.11.2013
  • Обновил основной пост! 07.11.2013
  • отрицательные значения пикселей предполагают, что расстояние находится снизу и/или справа от вашего спрайта. Если бы все они были положительными значениями, у вас, вероятно, не было бы этой проблемы... 07.11.2013

Ответы:


1

Думаю, я знаю, что происходит. Трудно объяснить - но я попробую.

Я полагаю, вы настроили некоторые изображения спрайтов на основе повторяющегося фона, потому что вы не используете no-repeat. Каждый раз, когда вы добавляете в спрайт дополнительные изображения, любые значки, настроенные для повторяющегося изображения, будут смещаться.

Вам нужно будет:

1) Добавьте no-repeat на свой фон (любые значки, которые использовали повторяющееся изображение, теперь, вероятно, будут пустыми)

2) Перенастройте все ваши классы, чтобы использовать отрицательные значения (всегда используйте отрицательные значения для ваших спрайтов изображений)

Я бы посоветовал вам настроить спрайты примерно так:

CSS

.sprite-map {
  background: url(sprites.png) no-repeat;
}

.job-summary {
  background-position: -80px 0;
  width: 100px;
  height: 80px;
}

.popup-title {
  background-position: -15px -100px;
  width: 200px;
  height: 100px;
}

.popup-close {
  background-position: -15px -472px;
  width: 50px;
  height: 50px;
}

HTML

<div class="job-summary sprite-map"></div>
<div class="popup-title sprite-map"></div>
<div class="popup-close sprite-map"></div>

Таким образом, вам нужно указать URL-адрес спрайта только один раз. Теперь когда вы добавляете изображения внизу или справа от спрайта - больше ничего не затрагивается.

Также, если вы знакомы с Sass, Compass делает спрайты изображений невероятно простыми. Возможно, вам стоит взглянуть, если вам интересно: http://compass-style.org/help/tutorials/spriting/

Надеюсь это поможет!

07.11.2013
Новые материалы
Коллекции публикаций по глубокому обучению
Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
Представляем: Pepita
Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
Советы по коду Laravel #2
1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
3 способа решить квадратное уравнение (3-й мой любимый) -
1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
Создание VR-миров с A-Frame
Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
Демистификация рекурсии
КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..