使用 CSS 剪辑/裁剪背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7777159/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clip/Crop background-image with CSS
提问by Dahie
I have this HTML:
我有这个 HTML：
<div id="graphic">lorem ipsum</div>
with this CSS:
使用这个 CSS：
#graphic { background-image: url(image.jpg); width: 200px; height: 100px;}
The background image I'm applying is 200x100 px, but I only want to display a cropped portion of the background image of 200x50 px.
我应用的背景图像是 200x100 像素，但我只想显示 200x50 像素的背景图像的裁剪部分。
background-clipdoes not appear to be the right CSS property for this. What can I use instead?
background-clip似乎不是正确的 CSS 属性。我可以用什么代替？
background-positionshould not be used, because I'm using the above CSS in a sprite context where the image part I want to show is smaller than the element on which the CSS is defined.
background-position不应该使用，因为我在精灵上下文中使用上述 CSS，其中我想要显示的图像部分小于定义 CSS 的元素。
回答by Brent
You can put the graphic in a pseudo-element with its own dimensional context:
您可以将图形放在具有自己的维度上下文的伪元素中：
#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/); /* Image is 500px by 500px, but only 200px by 50px is showing. */
}<div id="graphic">lorem ipsum</div>Browser support is good, but if you need to support IE8, use a single colon :before.IE has no support for either syntax in versions prior to that.
浏览器支持很好，但如果你需要支持 IE8，请使用单个冒号:before。在此之前的版本中，IE 不支持任何一种语法。
回答by sandeep
may be you can write like this:
也许你可以这样写：
#graphic {
background-image: url(image.jpg);
background-position: 0 -50px;
width: 200px;
height: 100px;
}
回答by Mingwei Samuel
Another option is to use linear-gradient()to cover up the edges of your image. Note that this is a stupid solution, so I'm not going to put much effort into explaining it...
另一种选择是用来linear-gradient()掩盖图像的边缘。请注意，这是一个愚蠢的解决方案，所以我不会花太多精力来解释它......
.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('https://championmains.github.io/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="https://championmains.github.io/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 />I'm using this method on this page: https://championmains.github.io/dynamicflairs/riven/and can't use ::beforeor ::afterelements because I'm already using them for another hack.
我在此页面上使用此方法：https: //championmains.github.io/dynamicflairs/riven/并且不能使用::before或::after元素，因为我已经将它们用于另一个黑客攻击。
