这是文件:http ://studioteknik.ca/stackoverflow_question/test1.html我当时只需要查看一张背景图片,假设是第二张。它距顶部 400 像素,但我需要将其图像裁剪为顶部 400 高度。怎么做 ?
问问题
3374 次
3 回答
4
一般来说,内容图像不应该是背景或精灵,它们应该是使用IMG
标签的内联图像。Sprites 通常保留给 UI 元素,例如图标和菜单元素。
<div class="sprite1"></div>
CSS:
.sprite1 {
height:400px;
width:400px;
background-image:url(http://www.studioteknik.ca/stada/wp-content/themes/stada-theme/images/banner_sprite.jpg);
background-position:0 -400px;
}
于 2013-01-17T20:29:33.213 回答
1
我使用伪元素(之前/之后)为精灵生成我想要的框大小,并将背景图像添加到其中。
这样,您可以将 'normal' 元素设置为position: relative
和:after
to position: absolute;
。
然后after
根据您的需要将其放置在与主容器相关的位置,并且后元素的大小可以防止图像精灵“溢出”。
我在这里更全面地记录了该技术:http: //benfrain.com/image-sprites-data-uris-icon-fonts-v-svgs/
于 2014-10-02T13:39:17.320 回答
0
是的 - 这是一个很好的答案。通常,您定位精灵的方式与定位普通图像的方式完全相同,但要设置高度和宽度,以便它们仅覆盖其中的一部分。背景位置是唯一改变的东西。如果我有一个 40 像素高的精灵并想显示它有 2 个 20 像素高的图像,代码将是这样的:
.sprite1{ height:20px;
width:20px;
background-image:url("myimage.jpg");
background-position: 0 0;
}
.sprite2{
height:20px;
width:20px;
background-image:url("myimage.jpg");
background-position:0 -20;
}
于 2013-01-18T00:42:28.157 回答