设置字体颜色的背景图像？答案

【问题标题】：Set background image for font color?设置字体颜色的背景图像？
【发布时间】：2011-11-07 20:49:36
【问题描述】：

假设我有以下代码：

<span>Hello world!</span>

还有以下 CSS：

span{
color:red;
}

有什么方法可以将red 更改为图像？喜欢url(images/text-bg.png);？我想在我的文本上添加一个纹理，并决定将文本“着色”为图像，但我不确定这是否可以使用 CSS 来完成。

【问题讨论】：

我正在考虑是否有办法使用不透明度来做到这一点；但我认为没有。 developer.mozilla.org/en/CSS_Reference 到处看看可用的文本和字体样式，看看是否有任何东西可以尝试在不使用图像的情况下获得您想要的效果。
你也许可以用一点 SVG 来制作它...
With css is it possible to use an image for text color?的可能重复
好的，“欺骗”链接回到这里。此外，我“对正在解决的问题有一个最小的了解”。当时我不知道这是否可能，但我发现那里离题外话很远。由于文本的背景图像没有常规的 CSS 语法，所以我在这里问了它。再一次，我真的不认为这应该被贴上“离题”的标签。

标签： html css

【解决方案1】：

有可能，看看这支笔在这里

https://codepen.io/feferonka/pen/eoWLZp

在文本的父级上使用它：

  background-image: url(url);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

【讨论】：

【解决方案2】：

这对我来说很好用

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: url(your-image.jpg);

【讨论】：

这需要是您的 h1 或您的文本在这种情况下跨度的样式。

【解决方案3】：

是的，可以使用 svg ，您可以将 <svg> 嵌入到一个 <div> 上，并将背景图像嵌入到另一个 <div> 上，然后将 z-index 应用于 <div>。您可以使用 illustrator 等 Vector 应用程序以您想要的方式创建 svg。

<html>
<head>
<title>Untitled Document</title>
<style>
html
 {
    background-image:url('lauch.jpg');
    background-repeat:no-repeat;
    background-position:center;
    padding-top:200px;
 }
</style>
</head>
<body>

<div align="center">
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="140px" height="80px" viewBox="0 0 76.25 39.167" enable-background="new 0 0 76.25 39.167" xml:space="preserve">
<text transform="matrix(1 0 0 1 5.9336 30.417)" fill="none" stroke="red" stroke-width="0.25" stroke-miterlimit="10" font-family="'Tahoma'" font-size="36">Text</text>
</div>
</body>
</html>

【讨论】：

当你可以有一个 img 时使用 svg 没有意义。除非你当然愿意。

【解决方案4】：

将文本替换为图像的技术在标题和页面导航中很常见，但实际上没有任何纯 CSS 技术可以跨浏览器兼容（this 是一个很好的技术，但不是你想要的应该依靠）。

如果要应用纹理的文本数量有限，最好的办法是手动将文本替换为图像，如下所示：

HTML：

<h1 class="title">Title</h1>

CSS：

h1.title { 
  background: url(images/title.gif) 0 0 no-repeat;
  width: 80px;
  height: 23px;
  text-indent: -10000px; }

【讨论】：

事情是这样的，我希望能够更改文本而无需进入 PS 并重新制作标题。
是的。同样，我真的只推荐这种技术，如果你将它用于“有限数量的文本”，并且，正如你所说的，可以预期是静态的文本。

【解决方案5】：

这是不可能的，即使是 CSS3。这是一篇关于可以与 CSS3 一起使用的文本效果的有趣文章。

http://www.catswhocode.com/blog/8-examples-of-stunning-css3-text-effects

另一种选择是使用适合您需要的自定义字体。

这个网站有大量免费的开源字体，每种格式都支持所有浏览器，它甚至为您提供了一个很好的演示文件来演示如何在 CSS 中实现它。这也与 CSS2.1 兼容，使其兼容 IE7+。

http://www.fontsquirrel.com/

【讨论】：

看来我用你给我看的链接中的“斑马”例子达到了同样的效果。
不幸的是，该示例不属于该列表。它不是 CSS3，它只是使用@wex 提到的图像替换
是的，而且背景必须与图案颜色相同。