фоновых переходов CSS со спрайтами изображений — Гордон Лести
18 сентября 2016 г.
КСС
Вы начнете думать о спрайтах изображений, если увидите, что на вашем сайте слишком много запросов только из-за некоторых
фоновые изображения. Спрайт изображения может объединять множество отдельных запросов от браузера к серверу в один запрос.
Нам просто нужно объединить наши фоновые изображения в одно изображение и использовать свойство CSS фоновая позиция . Это просто усложняется, если у вас есть переход на фоне.
Фоновый переход без спрайтов изображения
Я сделал небольшой пример без спрайтов изображения, чтобы было понятно, какой результат мы ожидаем от фонового перехода.
например, с :hover . Я сделал div с файлом PNG, который содержит красный круг как
фон. Если мы наведем курсор на элемент, он должен медленно стать зеленым.
<стиль>
.example1 {
фон: url(red.png) без повтора;
ширина: 200 пикселей;
высота: 200 пикселей;
переход: фон 0,5с;
}
.
example1:наведите {
фон: url(green.png) без повторов;
переход: фон 0,5с;
}
<дел>
Спрайты изображений без фонового перехода
В следующем примере показано общее использование спрайта изображения без фонового перехода.
Создание спрайта изображения
Это спрайт, который мы будем использовать. Просто красный и зеленый кружок сверху в одном файле изображения рядом.
Использование спрайта изображения
Нам просто нужно указать background-position . Круг снова станет зеленым, если мы наведем курсор на
9Элемент 0005 div , но теперь без эффекта затухания.
Теперь мы будем комбинировать спрайты изображений с фоновыми переходами.
Неудачный пример
Вот неудачный пример спрайтов изображений в сочетании с фоновыми переходами. Круг меняется с красного на
зеленый, если мы наводим курсор на элемент, но не так, как ожидалось. Положение фона просто плавно меняется. А
классный эффект, но не тот эффект, который мы хотим.
<стиль>
.example3 {
фон: url(sprite.png) 0px 0px без повтора;
ширина: 200 пикселей;
высота: 200 пикселей;
переход: фон 0,5с;
}
.example3:наведите {
фон: url(sprite.png) -200px 0px без повтора;
переход: фон 0,5с;
}
<дел>
Использование двух разных файлов спрайтов изображений не является решением. Эффект от
выше просто более странно.
После селектора в качестве решения
Одним из возможных решений этой проблемы является селектор ::after . Теперь у нас должно получиться ожидаемое гладкое
Эффект затухания на фоновом переходе.
Определение и использование Свойство background-image устанавливает одно или несколько фоновых изображений для элемента. По умолчанию фоновое изображение размещается в верхнем левом углу элемента и повторяется как по вертикали, так и по горизонтали. Совет. Фон элемента — это общий размер элемента, включая отступы и границы (но не поля).
Фоновое изображение CSS — как добавить URL-адрес изображения в свой элемент Div Допустим, вы хотите поместить одно или два изображения на веб-страницу. Один из способов — использовать CSS-свойство background-image. Это свойство применяет одно или несколько фоновых изображений к элементу, например
, как объясняется в документации.
Свойство фонового изображения CSS изменяет фон веб-сайта на изображение. Фоновое изображение задается с помощью свойства background-image: url (url_of_image). Вы можете указать несколько фоновых изображений, которые перекрываются, используя свойство background-image.
Свойство background-image в CSS применяет графику (например, PNG, SVG, JPG, GIF, WEBP) или градиент к фону элемента. Существует два разных типа изображений, которые вы можете включать в CSS: обычные изображения и градиенты.
Примечание. Если одним из свойств в сокращенном объявлении является свойство bg-size, вы должны использовать / (косая черта), чтобы отделить его от свойства bg-position, например. background:url(smiley.gif) 10px 20px/50px 50px; приведет к фоновому изображению, расположенному на 10 пикселей слева, на 20 пикселей сверху, а размер изображения будет 50 пикселей в ширину и 50 пикселей в высоту.
При установке URL-пути на /image.png, как в приведенном выше примере, браузер будет искать фоновое изображение по адресу <ваш адрес хоста>/image.png. Вы также можете создать другую папку внутри public/, если хотите упорядочить изображения по папкам.
URL-адрес изображения фона jpg
url(‘URL’) URL-адрес изображения. Чтобы указать более одного изображения, разделите URL-адреса запятой: нет: фоновое изображение отображаться не будет. По умолчанию: linear-gradient() Устанавливает линейный градиент в качестве фонового изображения. Определить как минимум два цвета (сверху вниз) radius-gradient() Устанавливает радиальный градиент в качестве фонового изображения.
Свойство CSS background-image используется для установки фонового изображения элементов HTML, таких как div, абзацы, заголовки, заголовки таблиц, тело и т. д. Вы можете устанавливать изображения с различными расширениями, такими как png, jpg, gif, svg и т. д. Вы также можете использовать одно или несколько изображений для установки фона элементов с помощью CSS3.
png) 0px 0px без повтора;
положение: родственник;
ширина: 200 пикселей;
высота: 200 пикселей;
}
.example4:: после {
содержание: "";
фон: url(sprite.png) -200px 0px без повтора;
непрозрачность: 0;
переход: непрозрачность 0,5 с;
положение: абсолютное;
сверху: 0;
справа: 0;
внизу: 0;
слева: 0;
}
.example4: hover:: после {
непрозрачность: 1;
переход: непрозрачность 0,5 с;
}
Один из способов — использовать CSS-свойство background-image. Это свойство применяет одно или несколько фоновых изображений к элементу, например
