Html 为字体颜色设置背景图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7261680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set background image for font color?
提问by Charlie
Say I have the following code:
假设我有以下代码：
<span>Hello world!</span>
And the following CSS:
以及以下 CSS：
span{
color:red;
}
Is there any way I can change the redto an image? Like url(images/text-bg.png);? I want to put a texture on my text and decided that I would just make the text "color" an image, but I'm not sure if this can be done with CSS.
有什么办法可以将其更改red为图像吗？喜欢url(images/text-bg.png);？我想在我的文本上放置一个纹理并决定我只会让文本“着色”一个图像，但我不确定这是否可以用 CSS 来完成。
采纳答案by akthktd
Yes it's possible using svg , you can embed <svg>over one <div>and background image over another <div>, later apply z-index to <div>. You can use Vector applications like illustrator to create the svg the way you want.
是的，可以使用 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>
回答by Martin Hetfield Mali
it is possible, take a look at this pen here
有可能，在这里看看这支笔
https://codepen.io/feferonka/pen/eoWLZp
https://codepen.io/feferonka/pen/eoWLZp
Use this on parent of text:
在文本的父级上使用它：
background-image: url(url);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
回答by JuicY_Burrito
This works perfectly fine for me
这对我来说非常好
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: url(your-image.jpg);
回答by JuicY_Burrito
This is not possible, not even with CSS3. Here's an interesting article on text effects you can use with CSS3.
这是不可能的，即使使用 CSS3 也不可能。这是一篇关于可以与 CSS3 一起使用的文本效果的有趣文章。
http://www.catswhocode.com/blog/8-examples-of-stunning-css3-text-effects
http://www.catswhocode.com/blog/8-examples-of-stunning-css3-text-effects
Another option is to use a custom font which suites your needs.
另一种选择是使用适合您需求的自定义字体。
This site has an amazing amount of free open-source fonts in every format needed to support all browsers, it even gives you a nice demo file to demonstrate how to implement it in CSS. This is compatible with CSS2.1 as well, making it IE7+ compatible.
这个站点拥有数量惊人的免费开源字体，支持所有浏览器所需的各种格式，它甚至为您提供了一个很好的演示文件来演示如何在 CSS 中实现它。这也与 CSS2.1 兼容，使其与 IE7+ 兼容。
回答by Wex
The technique of swapping out text for images is common for headers and page navigation, but there really aren't any pure CSS techniques that are cross-browser compatible (thisis a nice technique, but isn't something you should rely on).
将文本替换为图像的技术在标题和页面导航中很常见，但实际上没有任何纯 CSS 技术可以跨浏览器兼容（这是一个很好的技术，但不是您应该依赖的技术）。
If you have a finite amount of text that you want to apply the texture to, your best bet is to just replace the text with images manually, as such:
如果您想要应用纹理的文本数量有限，最好的办法是手动用图像替换文本，如下所示：
HTML:
HTML：
<h1 class="title">Title</h1>
CSS:
CSS：
h1.title {
background: url(images/title.gif) 0 0 no-repeat;
width: 80px;
height: 23px;
text-indent: -10000px; }
