使用CSS裁剪/调整背景图片

Question

我有这个HTML：

<div id="graphic">lorem ipsum</div>

使用此CSS：

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

我应用的背景图像是200x100像素，但我只想显示一个裁剪后的200x50像素的背景图像。

background-clip看起来不是正确的CSS属性。我该使用什么代替它呢？

background-position不能使用，因为我在精灵上下文中使用上述CSS，在这种情况下，我想要显示的图像部分比定义CSS的元素更小。

- Dahie

---

http://css-tricks.com/158-css-sprites/ 和 http://www.google.dk/search?q=css+sprites+generator :) - Lasse Espeholt

Answer 1

你可以将图形放在一个伪元素中，并具有自己的尺寸上下文：

#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>

浏览器支持良好，但如果您需要支持IE8，请使用单个冒号:before。在此之前的版本中，IE不支持任何语法。

- Brent

---

我在你的 jsfiddle 上根本看不到背景。 - Jeremy Moritz

@JeremyMoritz 看起来placekitten服务目前出现故障/停机了。已更改为使用placehold.it。 - Brent

这个答案引导我使用 before 和 after 而不是多个背景，当你只需要两个时，你也可以使用精灵！ - Tebo

如果我想从内部而不是从左上角爬行怎么办？ - JaskeyLam

@JaskeyпјҡеҸӘйңҖеңЁдјӘе…ғзҙ еҶ…дҪҝз”Ёbackground-positionеҚіеҸҜ移еҠЁиғҢжҷҜгҖӮ - Gelmir

对于不熟悉伪元素渲染方式的人来说，浏览器会将它们放置在您所针对的元素的HTML内部。我这么说是为了让您不必通过发现它无法与没有内部HTML的输入字段等元素一起使用的长路来学习。 - amonett

Answer 2

也许你可以这样写：

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

- sandeep

---

实际上，那应该可以工作，如果你不想同时缩放背景的话。如果你想同时缩放背景，那么你就必须使用<img/>标签。 - Shamsudeen Zziwa

@ShamsudeenZziwa；他不想缩放图像，只是想展示一个尺寸为200x50像素的图像。 - sandeep

不应使用“background-position”，因为我在精灵上下文中使用了上述CSS，因此我试图避免这种情况，看看是否有其他选择。我还将此信息添加到初始帖子中。 - Dahie

一个小例子可能更好地理解您的问题。 - sandeep

Answer 3

另一种选择是使用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 />

我在这个页面上使用了这种方法：https://championmains.github.io/dynamicflairs/riven/，由于我已经在使用另一个hack，所以无法使用::before或::after元素。

- Mingwei Samuel