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

您可以将图形放置在具有其自身尺寸上下文的伪元素中：

#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/); }<div id="graphic">lorem ipsum</div>

浏览器支持很好，但是如果需要支持IE8，请使用单个冒号

:before