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

标签 javascript jquery css html

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

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

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

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

谢谢

最佳答案

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

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

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

关于javascript - 自定义剪切,如 HTML5 和 CSS 中的背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25203698/

相关文章:

jquery - 替换jquery对象的内容

javascript - 自动滚动到部分

html - 如何制作2行8列的CSS

html - 修复了继承 flex 属性的 flexed div 的子元素

CSS 100% div 高度

javascript - 如何利用 jQuery 来检测带有动态生成的 ID 的选择标签上的变化并更改选择的选项

javascript - 如何在浏览器中安全存储 JWT?

javascript - NodeJS 可执行文件无法通过 `process.argv` 接收命令参数

javascript - D3JS 的 AngularJS 指令是否存在?

javascript - 当其他选择更改时如何更改选择标签值?