Jquery 如何在文本下像背景一样显示图像？

我想在文本下显示图像。我用Photoshop做了这个，但它是一个图像。所以每次文本更改时，我都必须在Photoshop中进行更改。我希望使用jQuery、CSS3或任何其他web技术实现同样的功能

我希望类似于此，但不是每次文本更改时创建新图像

---

如果文本没有改变，只需制作一个带有白色背景和透明文本的图像，然后使用css将该图像置于背景之上，无需jquery。

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

下面的示例将按文本剪裁图像并向其添加阴影

例子

这样做的结果将是：

/// 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);

现在我们画的图像被剪掉了。要添加阴影，我们需要进行额外的循环，就像我们从一开始添加阴影一样，图像也会被绘制到阴影区域中

因此，我们需要做的是将复合模式重置为默认模式，设置阴影，然后将画布绘制回自身。因为它是在上面画的，在同一个位置，我们不会注意到

我们在这里使用

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();

在演示中，我做了一个循环来更改文本，这样您就可以看到，只需提供不同的文本即可

还要注意，背景是透明的，因此可以将画布放在其他元素的顶部（在演示中，我更改了主体的背景颜色）

---

我建议将演示代码重构为通用函数。为此，您可以将所有设置放入其中，并将

save

移到开头，将

restore

移到结尾，以保留函数之外设置的其他设置。

使用webkit背景剪辑的解决方案-请注意，目前这在Firefox中不起作用

从这里重写

---

结合Ken-Abdias软件和mplungjan的解决方案，我决定制作一个相对跨浏览器的CSS解决方案，允许更改数组中的文本

重要CSS（用于剪辑）

用于循环的重要jQuery

h1 {
    background: white;
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
    width: 100%;
    max-width: 960px;
    margin: 5% auto;
}
.backgroundclip h1 span {
    background: url(http://i.imgur.com/TzKl9Kml.jpg) center center no-repeat;
    text-align: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}

var terms = ["This", "is", "Hawaii"];
function rotateTerm() {
  var ct = $("h1 > span").data("term") || 0;
  $("h1 > span").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct])
              .fadeIn().delay(600).fadeOut(600, rotateTerm);
}

$(rotateTerm);

---

对原著作者的引用是不可靠的。改编自这些作者。

OP希望避免使用此解决方案对他需要的图像进行更改。我已经提到。文本每次都在更改。我想将图像和文本分开，这样任何图像都可以应用于任何文本。可能重复的Mr.mplungjan此问题与您提到的问题不重复..检查两次，然后首先看到我发布的图像…我可以使用您的问题实现此目的吗？发布链接中的第二个答案应该很有趣，使用透明文本和rgbaWell设置的alpha通道，使用canvas，您可以做到这一点：下面是一个在webkit上工作的。我正在测试其他浏览器，在Chrome中文本被剪裁在底部。另外，您的宽度和高度似乎没有得到应用。实际上，这是我在canvas元素本身（

height

）中的一个输入错误，它使canvas默认为150像素的高度（从而剪裁文本）。现在更正。此外，Chrome处理的文本与Firefox稍有不同，因此大小和位置可能略有不同——这就是Chrome可以看到文本的原因。感谢您的反馈。添加其他版本的剪辑是个好主意。

var terms = ["This", "is", "Hawaii"];
function rotateTerm() {
  var ct = $("h1 > span").data("term") || 0;
  $("h1 > span").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct])
              .fadeIn().delay(600).fadeOut(600, rotateTerm);
}

$(rotateTerm);