使用CSS剪裁/裁剪背景图像

我有这个HTML：

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

我正在应用的背景图像是200x100像素，但我只想显示200x50像素背景图像的裁剪部分

background clip

似乎不是此CSS的正确属性。我可以用什么来代替

---

不应使用背景位置，因为我在sprite上下文中使用上述CSS，其中我要显示的图像部分小于定义CSS的元素。

可能是您可以这样写：

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

---

您可以将图形放在具有自己维度上下文的伪元素中：

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

#图形{
宽度：200px；
高度：100px；
位置：相对位置；
}
#图形：：之前{
内容：''；
位置：绝对位置；
宽度：200px；
高度：50px；
z指数：-1；
背景图片：url(http://placehold.it/500x500/)；/*图像是500px乘500px，但仅显示200px乘50px*/
}

---

lorem ipsum

另一种选择是使用

linear-gradient（）。请注意，这是一个愚蠢的解决方案，所以我不会花太多精力来解释它


.flair{
最小宽度：50px；/*比雪碧大的宽度*/
文本缩进：60px；
高度：25px；
显示：内联块；
背景：
线性梯度（#F00，#F00）50px 0/999px 1px重复-y，
url（'https://championmains.github.io/dynamicflairs/riven/spritesheet.png"#F00 ;；
}
.天才经典{
背景位置：50px0，0-25px；
}
.flair-r2{
背景位置：50px0，-50px-175px；
}
A.天赋打击{
文本缩进：35px；
背景位置：25px0，-50px-25px；
}




经典雪碧


r2精灵


smite sprite

和：）实际上，如果您不想缩放背景，这应该可以工作。如果您也想缩放背景，则必须使用tag@ShamsudeenZziwa; 他不想缩放图像。他只想显示尺寸为200x50px的图像。
不应使用背景位置
，因为我在sprite上下文中使用上述css，因此我尝试避免这种情况，并查看是否有其他选项。我将把这些信息也添加到最初的帖子中。然后用一个小提琴的例子更好地理解你的问题。我在你的文章中根本看不到背景jsfiddle@JeremyMoritz看来placekitten的服务现在坏了。改为使用placehold.it。这个答案引导我在只需要2个背景时使用before和after，而不是使用多个背景，而且还可以使用精灵@Jaskey：只需在pseudo-element中使用
background position
移动背景即可。对于不熟悉pseudo-element呈现方式的任何人，浏览器会将其放置在目标元素的html中。我这样说是为了让你不用花太多时间去发现它是如何与没有内部html的输入字段之类的元素协同工作的。
#graphic {
  position: relative;
  width: 200px;
  height: 100px;
}
#graphic::before {
  position: absolute;
  content: '';
  z-index: -1;
  width: 200px;
  height: 50px;
  background-image: url(image.jpg);
}