如何将图片作为背景显示在文本下方？

Question

我希望在文字下方显示图片。我已经用Photoshop实现了这个功能，但它是一张图片。因此，每次文本更改时，我都必须在Photoshop中进行更改。我希望使用jQuery、CSS3或其他任何Web技术来实现相同的效果。

我希望实现与以下类似的效果，但不通过创建新图片来处理每次文本变化：

- Hardik Sondagar

---

使用 Canvas 可以实现这个效果：http://jsfiddle.net/AbdiasSoftware/ZmUmV/。 - user1693593

糟糕 - 不对。那是在两个人发布图像解决方案之后我添加的。 - mplungjan

@Ken-AbdiasSoftware：是的，没错。但如果在CSS3中没有可用的解决方案，那么就只能将其视为一个已解决的问题。 - Hardik Sondagar

我改成了“不创建新图像”。 - mplungjan

这是一个在webkit上运行的示例。我正在测试其他浏览器 https://dev59.com/tWgu5IYBdhLWcg3w8bhs http://jsfiddle.net/mplungjan/uyKQ3/ - mplungjan

Answer 1

画布

这不是使用CSS，而是使用画布元素。

以下示例将通过文本剪辑图像，并向其添加阴影。

示例

点击此处查看实时演示

执行此操作的结果如下所示：

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

现在我们所绘制的图片被裁剪了。要添加阴影，我们需要额外进行一轮操作，因为如果我们从一开始就添加阴影，那么图片也会被绘制到阴影区域中。

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

在这里，我们使用“保存”和“恢复”来避免手动重置阴影。

/// 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放在结尾，以保留在函数外设置的其他设置。

- user1693593

---

在Chrome中，文本底部被剪裁了。此外，您的宽度和高度似乎没有应用。 - Bram Vanroy

实际上，这是我在画布元素本身(height)中犯的一个打字错误，导致画布默认高度为150像素（从而裁剪文本）。现已更正。此外，Chrome处理文本与Firefox有些不同，因此大小和位置可能略有不同 - 这就是在Chrome中可见的原因。感谢您的反馈。 - user1693593

Answer 2

使用webkit-background-clip解决方案 - 请注意，目前火狐浏览器不支持此功能。

以下是重写的内容：HTML/CSS: "See Through Background" Text? 请点击实时演示

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

- mplungjan

Answer 3

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

实时演示

重要的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;
}

Important jQuery for looping

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

参考原作者在 Fiddle 中。改编自这些作者。

- Bram Vanroy

---

添加其他版本的剪辑是个好主意。 - mplungjan

Answer 4

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

- sanchixx

---

OP希望通过这个解决方案避免对他所需的图像进行更改。 - user1693593

我提到过。文本每次都在变化。 我想要将图像和文本分开，以便任何图像都可以应用于任何文本。 - Hardik Sondagar