为了清楚起见，请查看以下图片。
第一个是我打算实现的。这是一个带有两个背景图像的文本输入元素，每侧一个。
第二个图像是包含我需要的图标的精灵图像。
现在我的问题是，是否可以剪切背景图像以仅显示图像的一部分？此外，是否可以在多种背景下使用它？
第一张图片：
第二张图片：
问问题
1884 次
4 回答
3
您将不得不使用两个单独的图标图像来使其按您目前的预期工作。
使用 CSS 精灵，背景被元素的大小剪裁，有一个实验性的 CSS3 属性被调用background-clip，但它不能按照你想要的方式工作（它会剪裁到框的边框、填充或内容，而不是特定的方面。）
所以创建两个图标，在元素的每一侧使用一个background-position。
正如您在此处看到的，使用 spritesheet 它将显示整个背景图像，而不是您想要的两个图标。目前还没有办法以您想要的方式剪辑 BG 图像。（希望有一天！）
于 2012-08-15T08:01:34.350 回答
2
您将需要使用单独的图标，或者您需要在输入框顶部叠加 2 个附加元素（用于显示图标）。后者将让您使用精灵本身。
于 2012-08-15T08:12:01.903 回答
1
设置你的元素（比如说 div）你的大背景图片，然后用background-position. 您的图像将根据您的元素大小（例如 div）进行裁剪。
在你的情况下，它会在：
background-position: -87 -35;
和 div 大小：
width: 28px; height: 30px
于 2012-08-15T07:59:49.570 回答
0
CSS3您可以为一个元素使用多个背景图像。要显示图像中的特定部分，您需要设置其background-position属性。
例如：
background-image: url(sprites.png), url(sprites.png);
background-position: center bottom, left top;
您还可以background-postion以像素为单位进行定义，例如：
background-position: -5px 10px, -35px 10px;
有关更多信息，请查看此链接
于 2012-08-15T07:59:56.843 回答