使用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的元素。

Answer 1

您可以使用自己的尺寸上下文将graphics放在伪元素中：

 #graphic { width: 200px; height: 100px; position: relative; } #graphic::before { content: ''; position: absolute; 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> 

Answer 2

可能你可以这样写：

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

Answer 3

另一个select是使用linear-gradient()来掩盖图像的边缘。 请注意，这是一个愚蠢的解决scheme，所以我不会花费太多精力来解释它…

 .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('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="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 />