Обрезать / обрезать фон-изображение с помощью CSS

#css #css-sprites

#css #css-спрайты

Вопрос:

У меня есть этот HTML:

 <div id="graphic">lorem ipsum</div>

с помощью этого CSS:

 #graphic { background-image: url(image.jpg); width: 200px; height: 100px;}

Фоновое изображение, которое я применяю, имеет размер 200×100 пикселей, но я хочу отобразить только обрезанную часть фонового изображения размером 200×50 пикселей.

background-clip похоже, это не подходящее свойство CSS для этого. Что я могу использовать вместо этого?

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

Ответ №1:

Вы можете поместить графику в псевдоэлемент с собственным пространственным контекстом:

 #graphic {
  position: relative;
  width: 200px;
  height: 100px;
}
#graphic::before {
  position: absolute;
  content: '';
  z-index: -1;
  width: 200px;
  height: 50px;
  background-image: url(image.jpg);
}

Показать фрагмент кода

 #graphic {
    width: 200px;
    height: 100px;
    position: relative;
}
#graphic::before {
    content: '';
    
    position: absolute;
    width: 200px;
    height: 50px;
    z-index: -1;
    
    background-image: url(http://placehold.it/500x500/); /* Image is 500px by 500px, but only 200px by 50px is showing. */
}

 <div id="graphic">lorem ipsum</div>

Поддержка браузера хорошая, но если вам нужно поддерживать IE8, используйте один двоеточие :before .IE не поддерживает ни один синтаксис в предыдущих версиях.

1. Я вообще не вижу фона на вашем jsfiddle

2. @JeremyMoritz Похоже, что служба placekitten на данный момент не работает. Изменено для использования placehold.it .

3. Этот ответ привел меня к использованию before и after вместо нескольких фонов, когда вам нужно всего 2, и вы также можете использовать спрайты!

4. @Jaskey: просто переместите фон с background-position помощью внутреннего псевдоэлемента.

5. Для тех, кто не знаком с тем, как отображаются псевдоэлементы, браузер помещает их в html элемента, на который вы ориентируетесь. Я говорю это, чтобы вам не пришлось долго изучать, как это не работает с такими элементами, как поля ввода, у которых нет внутреннего html.

Ответ №2:

может быть, вы можете написать так:

 #graphic { 
 background-image: url(image.jpg); 
 background-position: 0 -50px; 
 width: 200px; 
 height: 100px;
}

1. на самом деле это должно сработать, если вы также не хотите масштабировать фон. если вы хотите также масштабировать фон, вам придется использовать тег <img/>

2. @ShamsudeenZziwa; он не хотел масштабировать изображение. Он просто хочет показать изображение размером 200×50 пикселей.

3. background-position не следует использовать, потому что я использую приведенный выше css в контексте спрайтов, и поэтому я стараюсь избегать этого и посмотреть, есть ли у меня другие варианты. Я добавлю эту информацию также к первоначальному сообщению.

4. тогда пример скрипки лучше понять вашу проблему

Ответ №3:

Другой вариант — использовать linear-gradient() для прикрытия краев вашего изображения. Обратите внимание, что это глупое решение, поэтому я не собираюсь прилагать много усилий для его объяснения…

 .flair {
  min-width: 50px; /* width larger than sprite */
  text-indent: 60px;
  height: 25px;
  display: inline-block;
  background:
    linear-gradient(#F00, #F00) 50px 0/999px 1px repeat-y,
    url('https://championmains.github.io/dynamicflairs/riven/spritesheet.png') #F00;
}

.flair-classic {
  background-position: 50px 0, 0 -25px;
}

.flair-r2 {
  background-position: 50px 0, -50px -175px;
}

.flair-smite {
  text-indent: 35px;
  background-position: 25px 0, -50px -25px;
}

 <img src="https://championmains.github.io/dynamicflairs/riven/spritesheet.png" alt="spritesheet" /><br />
<br />
<span class="flair flair-classic">classic sprite</span><br /><br />
<span class="flair flair-r2">r2 sprite</span><br /><br />
<span class="flair flair-smite">smite sprite</span><br /><br />

Я использую этот метод на этой странице: https://championmains.github.io/dynamicflairs/riven / и не могу использовать ::before ::after элементы or, потому что я уже использую их для другого взлома.