使用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不支持任何语法在之前的版本。