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


70

我有这个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的元素的sprite上下文中使用了上述CSS。


Answers:


101

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

#graphic {
  position: relative;
  width: 200px;
  height: 100px;
}
#graphic::before {
  position: absolute;
  content: '';
  z-index: -1;
  width: 200px;
  height: 50px;
  background-image: url(image.jpg);
}

浏览器支持很好,但是如果需要支持IE8,请使用单个冒号:beforeIE在此之前的版本中均不支持这两种语法。


我根本看不到您的jsfiddle的背景
Jeremy Moritz

@JeremyMoritz目前看来,餐小猫服务已损坏/关闭。更改为使用placehold.it。
布伦特

这个答案引导我在只需要2个背景的情况下使用前后背景,而不是使用多个背景,还可以使用精灵!
Tebo 2015年

1
@Jaskey:只需使用background-position内部伪元素移动背景即可。
Shahriyar Imanov

1
对于不熟悉伪元素呈现方式的任何人,浏览器都将其放置在您要定位的元素的html中。我说这是为了让您不必花很长的时间来发现它如何与不具有内部html的输入字段之类的元素一起工作。
amonett

9

也许你可以这样写:

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

实际上,如果您也不想缩放背景,那应该可以。如果你想扩展的背景为好,那么你将不得不使用在<img />标签
Shamsudeen Zziwa

@ShamsudeenZziwa; 他不想缩放图像。他只想显示200x50px尺寸的图像。
桑迪普

1
background-position不应使用,因为我在sprite上下文中使用了以上CSS,因此我尝试避免这种情况,并查看我是否还有其他选择。我还将此信息添加到初始帖子中。
2011年

那么一个小提琴的例子会更好地理解您的问题
sandeep

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/,不能使用::before::after元素,因为我已经将它们用于其他黑客了。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.