我有这个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不应该使用，因为我在sprite上下文中使用上面的CSS，其中要显示的图像部分小于定义CSS的元素。
解决方法
你可以把图形放在一个伪元素中，它有自己的维度上下文：
#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>
浏览器支持是好的，但if you need to support IE8,use a single colon :before. IE不支持任何语法在之前的版本。
