jquery - 如何在文本下显示图像作为背景？

Question

我想在文本下显示图像。我已经用 Photoshop 完成了这个，但它是一个图像。所以每次文本更改时，我都必须在 Photoshop 中进行更改。我想使用 jQuery 或 CSS3 或任何其他网络技术实现相同的目标。

我想要与此类似，但不是每次我的文本更改时都创建新图像

Answer 1

Canvas

这不是按要求使用 CSS，而是使用 canvas 元素。

以下示例将按文本裁剪图像并为其添加阴影。

例子

LIVE DEMO HERE

这样做的结果是:

/// set some text settings
ctx.textBaseline = 'top';  /// defaults to baseline, using top makes life simpler
ctx.font = '150px impact'; /// set the font and size we want to use
ctx.textAlign = 'center';  /// center for example

/// next draw the text
ctx.fillText(txt, demo.width * 0.5, 10);

下一步是更改合成模式，以便我们使用已经绘制的文本作为我们绘制的下一个内容的剪辑:

/// change composite mode to fill text
ctx.globalCompositeOperation = 'source-in';

/// draw the image you want on top; will be clipped by text
ctx.drawImage(img, 0, 0);

现在我们绘制的图像被裁剪了。要添加阴影，我们需要多做一轮，就好像我们从一开始就添加阴影一样，图像也会被绘制到阴影区域。

所以我们需要做的是将复合模式重置为默认模式，设置阴影，然后将 Canvas 绘制回自身。由于它绘制在顶部的相同位置，我们不会注意到。

我们在这里使用save 和restore 来避免手动重置阴影。

/// reset composite mode to normal
ctx.globalCompositeOperation = 'source-over';

/// create a shadow by setting shadow...
ctx.save();
ctx.shadowColor = 'rgba(0,0,0,0.5)';
ctx.shadowBlur = 7;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;

/// ... and drawing it self back
ctx.drawImage(demo, 0, 0);
ctx.restore();

在演示中，我做了一个更改文本的循环，因此您可以看到这只是提供不同文本的问题。

另请注意背景是透明的，因此您可以将 Canvas 放在其他元素之上(在演示中我更改了正文的背景颜色)。

我建议将演示代码重构为通用函数。为此，您可以将所有设置放入其中，并将 save 移动到开头，将 restore 移动到结尾，以保留在函数外部设置的其他设置。