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

前端之家收集整理的这篇文章主要介绍了html – 如何剪辑元素的背景以仅显示图像的一部分?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有关说明,请查看以下图像.
第一个是我打算实现的目标.它是一个带有两个背景图像的文本输入元素,每边一个.
第二个图像是包含我需要的图标的精灵图像.
现在我的问题是,是否可以剪切背景图像以仅显示图像的一部分?此外,它可以使用多个背景吗?

第1张图片

第二张图片

解决方法

您将不得不使用两个单独的图标图像来实现此功能.

使用CSS精灵,背景会被元素的大小剪裁,有一个名为background-clip的实验性CSS3属性,但它不能按照您想要的方式工作(它将剪切到边框,填充或框的内容,不是特定的维度.)

因此,创建两个图标,在元素的每一侧使用一个图标,背景位置.

As you can see here,使用spritesheet,它将显示整个背景图像,而不是您想要的两个图标.目前还没有办法以您想要的方式剪辑BG图像. (有一天,希望!)

猜你在找的HTML相关文章