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

Posted 2023-03-06

【中文标题】如何在文本下显示图像作为背景？

【英文标题】：How to display image under text like as a background?

【发布时间】：2013-10-20 23:45:44

【问题描述】：

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

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

【问题讨论】：

How to change text transparency in html/css?的可能重复

Mr.mplungjan 这个问题不是你提到的重复..检查两次，首先看看我发布的图片......我可以用你的问题来实现这个吗？

发布链接中的第二个答案应该很有趣，使用透明文本和 rgba 设置的 alpha 通道

好吧，使用画布你可以做到这一点：jsfiddle.net/AbdiasSoftware/ZmUmV

这是一个适用于 webkit 的。我正在测试其他浏览器***.com/questions/10957082/…jsfiddle.net/mplungjan/uyKQ3

【参考方案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 移至末尾，以保留函数外设置的其他设置。

【讨论】：

文本在 Chrome 的底部被剪切。此外，您的宽度和高度似乎没有得到应用。

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

【参考方案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;

【参考方案3】：

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

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

对原作者的引用在 Fiddle 中。改编自这些作者。

【讨论】：

添加其他版本的剪辑的好主意。

【参考方案4】：

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

【讨论】：

OP 希望避免使用此解决方案更改他需要的图像。

我已经提到了。文字每次都在变化。我想将图像和文本分开，以便任何图像都可以应用于任何文本。