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

Cha*_*lie 7 html css

说我有以下代码:

<span>Hello world!</span>
Run Code Online (Sandbox Code Playgroud)

以下CSS:

span{
color:red;
}
Run Code Online (Sandbox Code Playgroud)

有什么方法可以改变red图像吗?喜欢url(images/text-bg.png);?我想在我的文本上添加一个纹理,并决定将文本"color"作为一个图像,但我不确定这是否可以用CSS完成.

Mar*_*ali 8

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

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

在文本的父级上使用它:

  background-image: url(url);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
Run Code Online (Sandbox Code Playgroud)


小智 4

是的,可以使用 svg ,您可以嵌入<svg>一个<div>图像并将背景图像嵌入另一个图像<div>,稍后将 z-index 应用于<div>. 您可以使用 illustrator 等矢量应用程序按照您想要的方式创建 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>
Run Code Online (Sandbox Code Playgroud)