如何剪辑元素的背景以仅显示图像的一部分？

Question

有关说明,请查看以下图像.
第一个是我打算实现的目标.它是一个文本输入元素,有两个背景图像,每边一个.
第二个图像是包含我需要的图标的精灵图像.
现在我的问题是,是否可以剪切背景图像以仅显示图像的一部分？此外,是否可以使用多个背景？

第1张图片:

第二张图片:

Answer 1

您将必须使用两个单独的图标图像才能使其按您目前的预期工作。

使用CSS sprites，背景会根据元素的大小进行裁剪，有一个称为实验性CSS3属性，background-clip但它不能按您想要的方式工作（它将裁剪到框的边框、填充或内容，而不是特定的方面。）

因此，创建两个图标，在元素的每一侧使用一个带有 的图标background-position。

正如您在此处看到的，使用 spritesheet 它将显示整个背景图像，而不是您想要的两个图标。目前还没有办法按照您想要的方式剪辑 BG 图像。（希望有一天！）