gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 13:48:40 27 4
gpt4 key购买 nike

如需说明,请查看以下图片。
第一个是我打算实现的。这是一个带有两个背景图像的文本输入元素,每侧一个。
第二张图片是包含我需要的图标的 Sprite 图片。
现在我的问题是,是否可以裁剪背景图像以仅显示图像的一部分?此外,是否可以在多个背景下使用它?

第一张图片:
enter image description here

第二张图片:
enter image description here

最佳答案

您将不得不使用两个单独的图标图像来使其按您目前的预期工作。

使用 CSS sprites,背景会根据元素的大小进行裁剪,有一个名为 background-clip 的实验性 CSS3 属性,但它无法按照您想要的方式工作(它将裁剪到框的边框、填充或内容,而不是特定尺寸。)

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

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

关于html - 如何裁剪元素的背景以仅显示图像的一部分?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11965789/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com