我有这个 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 的元素。
您可以将图形放入具有自己的维度上下文的伪元素中:
#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. https://developer.mozilla.org/en-US/docs/Web/CSS/::beforeIE 在之前的版本中不支持这两种语法。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)