Настройка спрайтов изображений с использованием 1 URL в CSS - PullRequest
Новая
       68

Настройка спрайтов изображений с использованием 1 URL в CSS

0 голосов
/ 13 декабря 2018

То, что я хочу сделать, это использовать только 1 URL-адрес изображения в CSS.

Поэтому мне нужно будет изменить только 1 URL-адрес в CSS, а не все из них, если я изменю изображение или что-то еще.

Код уже использует спрайт изображения.Я просто хочу, чтобы в нем использовался 1 URL-адрес изображения вместо 6.

Как бы это сделать?

Это место, где расположены все URL-адреса изображений и положения фона.:

https://jsfiddle.net/g6oaht8f/286/

.jacketc {
  position: relative;
  width: 606px;
  height: 344px;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat -600px -862px;
}

.jacketd,
.wraph {
  background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat 0 0;
}

.wraph {
  position: relative;
  width: 606px;
  height: 606px;
  margin: 45px 0 0 0;
  overflow: hidden;
  border-radius: 25px;
  background-position: 0 -600px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapb,
.wrapb::before {
  background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat -600px 0;
}

.wrapb::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 266px;
  height: 266px;
  background-position: -600px -260px;
  opacity: 0;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  transition: all 2s;
}

.wrapd .img {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 180px;
  height: 180px;
  background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat -860px -340px;
}

.jacketb,
.wrape {
  background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat -600px -520px;

}

.wrape {
  position: relative;
  width: 266px;
  height: 174px;
  overflow: hidden;
  margin: 45px 0 0 0;
  border-radius: 25px;
  background-position: -600px -687px;
}

.wrapf {
  position: relative;
  width: 266px;
  height: 251px;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  background: #000000 url("https://i.imgur.com/Y0CrMX2.png") -866px -616px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

Ответы [ 2 ]

0 голосов
/ 14 декабря 2018

Решение Дэвида М правильное.Единственная проблема, которую я вижу, это отсутствие запятой после .wrapd .img (см. Ниже) 

.jacketb,
.jacketc,
.jacketd,
.wrapb,
.wrapb::before,
.wrapd .img,
.wrape,
.wraph,
.wrapf {
    background-image: url("https://i.imgur.com/Y0CrMX2.png");
    background-repeat: no-repeat;
}
0 голосов
/ 13 декабря 2018

См. CSS в этой скрипке: https://jsfiddle.net/ksp4qoej/

Обратите внимание на наиболее значимое изменение: 

.jacketb,
.jacketc,
.jacketd,
.wrapb,
.wrapb::before,
.wrapd .img
.wrape,
.wraph,
.wrapf {
  background-image: url("https://i.imgur.com/Y0CrMX2.png");
  background-repeat: no-repeat;
}

То, что мы делаем здесь, это применение изображения в качестве фона для нескольких классовэлементов с одним правилом.Значение background-position необходимо обновлять более детально, что делается в отдельных блоках селектора в другом месте файла.

Когда вы будете готовы, использовать что-то вроде SASS или LESS для генерации вашего CSS можнопредоставить более чистый код для карт изображений.Проверьте это!http://thesassway.com/intermediate/spriting-with-sass-and-compass

...