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

说我有下面的代码：设置字体颜色的背景图像？

<span>Hello world!</span>

下面CSS：

span{ 
color:red; 
}

有没有什么办法可以改变red到图像？像url(images/text-bg.png);？我想在我的文本上添加纹理，并决定将文本“颜色”设置为图像，但我不确定这是否可以使用CSS完成。

来源

2011-08-31 Charlie

我试图想如果会有办法做到这一点使用透明度;但我不认为有。 https://developer.mozilla.org/en/CSS_Reference查看可用的文本和字体样式，并查看是否有任何内容需要尝试，并在不使用图像的情况下获得所需的效果。 – Dave

你可能可以用它生成一些SVG ... – zzzzBov

可能的重复[用css可以使用图像的文字颜色吗？]（http://stackoverflow.com/questions/5812236/with- css-is-it-it-it-use-an-image-for-text-color） –

是的，它使用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>

来源

2012-06-13 16:02:11 akthktd

这是不可能的，甚至没有CSS3。这里有一篇关于CSS3可以使用的文本效果的有趣文章。

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

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

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

http://www.fontsquirrel.com/

来源

2011-08-31 18:36:24

看起来我在链接中看到了与“斑马纹”示例相同的效果。 – Charlie

不幸的是，这个例子不属于这个列表。它不是CSS3，它只是使用@wex提到的图像替换 –

是的，加上背景必须与模式颜色相同。 – Charlie

换出文本图像的技术是标题和页面导航常见，但真的没有任何纯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; }

来源

2011-08-31 20:22:27 Wex

这是事情，我希望能够改变文本，而不必进入PS并重新制作标题。 – Charlie

是的。再说一次，如果您使用“有限数量的文本”，我真的只推荐这种技术，正如您所说的那样，可以预期文本是静态的。 – Wex

对，我想知道是否还有其他方法。 – Charlie

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

回答

相关问题