Question

说我有以下代码：

<span>Hello world!</span>

以下CSS：

span{
color:red;
}

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

Answer 1

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

Answer 2

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

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

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

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

http://www.fontsquirrel.com/

Answer 3

这对我来说很好

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

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

Answer 5

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

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

在文本的父级上使用此符号：

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

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

5 个答案: