使用CSS剪辑/裁剪背景图像
我有这个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
不应使用,因为我在Sprite上下文中使用了上述CSS,在该Sprite上下文中,我要显示的图像部分小于定义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/); /* Image is 500px by 500px, but only 200px by 50px is showing. */ } <div id="graphic">lorem ipsum</div>
浏览器支持很好,但是如果需要支持IE8,请使用单个冒号
:before
IE在此之前的版本中均不支持这两种语法。