Клип / обрезка фона-изображение с CSS

Question

Клип / обрезка фона-изображение с CSS

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

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

С этим CSS:

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

фоновое изображение, которое я применяю, составляет 200x100 px, но я хочу отобразить только обрезанную часть фонового изображения 200x50 px.

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

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

333 3

css css-sprites

3 ответов:

Comments

Ничего не найдено.

Brent · Accepted Answer · 2018-06-02 12:12:00

вы можете поместить графику в псевдо-элемент с собственным размерным контекстом:
#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 не поддерживает ни один синтаксис в версиях до этого.

sandeep · Accepted Answer · 2011-10-15 13:31:27

может быть, вы можете написать так:
#graphic { 
 background-image: url(image.jpg); 
 background-position: 0 -50px; 
 width: 200px; 
 height: 100px;
}

Mingwei Samuel · Accepted Answer · 2016-08-05 10:01:35

другой вариант-использовать 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" /> 
 
classic sprite 
r2 sprite 
smite sprite 
я использую этот метод на этой странице: https://championmains.github.io/dynamicflairs/riven/ и ::before или ::after элементы, потому что я уже использую их на очередную халтуру.