如何在文本下显示图像，如背景？

Question

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

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

Answer 1

帆布

这不是按要求使用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);

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

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

我们在此处使用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移至最后，以保留在该功能外设置的其他设置。

Answer 2

使用webkit-background-clip的解决方案 - 请注意，目前这在Firefox中不起作用

从此处重写HTML/CSS: "See Through Background" Text?

Live Demo

h1, p { margin: 0; }

#container {
    padding: 20px 20px 100px;
    margin: 50px;
    position: relative;
}
#container h1 {
    /* has same bg as #container */
    background: url(http://media.royalcaribbean.com/content/shared_assets/images/destinations/regions/hero/hawaii_01.jpg);

    font-size: 12em;
    font-family: impact;
    left: 0;
    line-height: 100%;
    padding-top: 25px; /* padding + border of div */
    position: absolute; /* position at top left of #containter to sync bg */
    text-align: center;
    top: 0;
    width: 100%;
    text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -moz-text-fill-color: transparent;
    -moz-background-clip: text;
}

Answer 3

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

Live demo

重要的CSS（剪裁）

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;
}

用于循环的重要jQuery

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

对原作者的引用属于小提琴。改编自那些作者。

Answer 4

如果文字没有改变，只需制作一个白色背景的图像，然后用css将透明文字放在你的背景上，不需要jquery。