javascript - 自定义剪切，如 HTML5 和 CSS 中的背景

Question

我正在做一个元素，我将尝试如下解释我的问题:

所以我正在制作一个网页，其中我将具有不同的形状，比如说足球的形状、电视或类似的东西。接下来我有三个按钮来选择特定形状的颜色。之后，最后一件事是上传照片并将照片放在商店中，例如上传 T 恤上的照片。

因为我是初学者，所以我想知道我应该使用什么 HTML 概念来获得带有剪裁背景的 T 恤。我的想法是使用带 T 恤的背景照片，但在这种情况下，当我更改颜色时，它会更改颜色，它将仅使用该颜色替换背景照片。

我不确定我是否可以用任何其他方式解释这个问题。

谢谢

Answer 1

您最好的猜测是在 Sprite (谷歌 CSS Sprite )中放置多件不同颜色的 T 恤，然后根据用户的选择更改背景位置。

CSS sprites 的工作方式如下:您将所有图像放在一个图像中，但要确保容器足够小，只能容纳其中一个图像。然后，您可以使用 background-position 决定哪个部分必须可见。

StackOverflow 也使用 Sprite :http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3c6263c3453b