unity创建纹理
In this article we’re going to explore several techniques that can be used to create textured text or apply a background to text.
在本文中，我们将探索几种可用于创建带纹理的文本或将背景应用于文本的技术。
Please remember that some of the techniques covered in the article are experimental with very low browser support, and may not be the best technique to use when you’re building real projects that need wide browser support.
请记住，本文中介绍的某些技术在很少的浏览器支持下是试验性的，在构建需要广泛的浏览器支持的真实项目时，可能不是最佳的技术。
I’ve included a screenshot for each demo, the link to the demo in the end of each technique. You can also click the screenshot to see the respective demo.
我为每个演示都提供了屏幕截图，每种技术末尾都提供了到演示的链接。 您也可以单击屏幕截图以查看相应的演示。
使用将图像背景应用于文本-webkit-background-clip: text (Applying an Image Background to Text Using -webkit-background-clip: text)
We’re going to start with the CSS background-clip property and use it to get the following result:
我们将从CSS background-clip属性开始，并使用它来获得以下结果：
The CSS background-clip property determines an element’s background painting area, which is the area within which the background is painted. By default, the background extends all the way to the border of an element with a default value of border-box, and it can take other values like padding-box and content-box, which are self-explanatory.
CSS background-clip属性确定元素的背景绘画区域，即在其中绘画背景的区域。 默认情况下，背景以默认值border-box一直延伸到元素的border-box ，并且可以采用其他值，例如padding-box和content-box ，这是不言而喻的。
Different effects, such as giving an element transparent borders, can be created using this property, and it is pretty well supported in all modern browsers.
可以使用此属性创建不同的效果，例如为元素提供透明边框，并且在所有现代浏览器中都很好地支持该效果。
The background-clip property was extended in Webkit with a fourth value, text, which causes the background image to clip to foreground text (including decorations and shadows). Then, by giving the text a transparent color using the Webkit-only property -webkit-text-fill-color, the background image will show through the text, thus completing the clipping effect.
在Webkit中扩展了background-clip属性，使用第四个值text ，该值导致背景图像裁剪到前景文本(包括装饰和阴影)。 然后，通过使用仅Webkit的属性-webkit-text-fill-color为文本提供透明颜色，背景图像将通过文本显示，从而完成剪切效果。
The text value of the background-clip property is, at the time of writing of this article, not part of any standard yet, so unfortunately it can only work in WebKit browsers, and a simple CSS fallback can be provided for other browsers, or a polyfill could be used to provide other fallbacks.
在撰写本文时， background-clip属性的text值尚未成为任何标准的一部分，因此不幸的是，它仅可在WebKit浏览器中使用，并且可以为其他浏览器提供简单CSS后备功能，或者可以将polyfill用于提供其他后备广告。
For now, we’ll create a text with a background using the -webkit-background-clip property, and provide a CSS-only fallback which will show the image underneath the text for non-WebKit browsers.
现在，我们将使用-webkit-background-clip属性创建一个带有背景的文本，并提供仅CSS的后备广告，它将在非WebKit浏览器的文本下方显示图像。
For our demo (shown in the screenshot above), we have an element with a background and a headline inside it, and we want to clip its background to make it appear as if the background is only applied to the text inside it.
对于我们的演示(如上面的屏幕快照所示)，我们在其中有一个带有背景和标题的元素，并且我们希望剪切其背景以使其看起来就像背景仅应用于其中的文本一样。
<div class="container">
<!-- the element whose background we're going to clip -->
<div class="clipped">
<h1>CO<br/>OK</h1>
</div>
<!-- arbitrary content -->
<p><span>The #1 cooking magazine in the world.</span> New healthy and delicious recipes every week. Subscribe to the weekly issue of COOK magazine and stay up-to-date on the latest kitchen trends and tips anc tricks from the world's #1 chefs. <br/>
Download our app available for Android, iOS and Windows phones.</p>
</div>
We’re going to use a “fat font”, so that the background is more visible through the text. The .clipped element will get a background image, which we’ll clip to the text using the text value of the background-clip property. We’re going to set the text color to white, because non-WebKit browsers will display the text on top of the image and we need to pick a font color that would be readable on the background we chose. Then we’re going to set the text’s fill color to transparent, which will override the white text color in WebKit browsers so that the background image can show through.
我们将使用“胖字体”，以便通过文本更清晰地看到背景。 .clipped元素将获得背景图像，我们将使用background-clip property的text值将其剪切到文本。 我们将文本颜色设置为白色，因为非WebKit浏览器将在图像顶部显示文本，并且我们需要选择一种字体颜色，该颜色在我们选择的背景上是可读的。 然后，我们将文本的填充颜色设置为透明，这将覆盖WebKit浏览器中的白色文本颜色，以便可以显示背景图像。
.clipped {
background: url(../img/kitchen.jpg) no-repeat center center;
background-size: cover;
color: #fff;
text-align: center;
padding: 2em;
/* -webkit-background-clip clips the background of the element to the text */
-webkit-text-fill-color: transparent; /* overrides the white text color in webkit browsers */
-webkit-background-clip: text;
}
Check out demo 1: Text with Background using background-clip:text
签出演示1：使用background-clip:text带有背景的background-clip:text
If you’re viewing the demo in a non-WebKit browser, you will see a white text on top of a background image.
如果在非WebKit浏览器中查看演示，则背景图片上方会显示白色文本。
Displaying the background image behind the opaque text in non-WebKit browsers is probably the best fallback for when the image plays an important role in conveying a visual message, but you can also fall back to regular text without the image in the background, if you want. Divya Manian has written an excellent article explaining how to achieve that regular text fallback, and Rachel Nabors has created a Sass mixin based on Divya’s code and has made it available on Codepen for you to use if you want, too.
在非WebKit浏览器中将背景图像显示在不透明文本的后面，这可能是最好的后备方式，当图像在传达视觉消息时起着重要作用时，但是如果您不使用背景图像，也可以退回到常规文本想。 Divya Manian写了一篇出色的文章，解释了如何实现常规文本回退，Rachel Nabors根据Divya的代码创建了一个Sass mixin，并在Codepen上将其提供给您，以便您随意使用。
Now, just like we applied an image background to our text, you could also apply a gradient background to it. Because gradients in CSS are images you can apply a gradient to the .clipped element above, and the result will be a text with a gradient background. Riza Selçuk Saydam has created a very nice interactive step-by-step demo on Codepen which explains how a text gradient is made. You can check it out for a more visual explanation of this technique.
现在，就像我们将图像背景应用于文本一样，您也可以对其应用渐变背景。 由于CSS中的渐变是图像，因此您可以将渐变应用于上面的.clipped元素，结果将是带有渐变背景的文本。 RizaSelçukSaydam在Codepen上创建了一个非常不错的交互式分步演示，它解释了如何制作文本渐变。 您可以检查出该技术的更直观说明。
使用mask-image: url();将纹理应用于文本mask-image: url(); (Applying Texture to Text Using mask-image: url();)
The following CSS technique we’re going to go over is, at this time, also supported in WebKit browsers only (see support tables here) with the -webkit prefix.
目前，我们将要遍历的以下CSS技术仅在带有-webkit前缀的WebKit浏览器中受支持(请参阅此处的支持表)。
We’re going to use CSS masks to create a nice textured text effect. CSS Masking is a W3C working draft, and so hopefully it won’t be long before other browsers also start implementing it.
我们将使用CSS蒙版创建漂亮的带纹理的文本效果。 CSS Masking是W3C的工作草案，因此希望不久之后其他浏览器也将开始实现它。
But for now, we’re going to create a demo that will currently work in WebKit browsers only, and we’ll provide a simple fallback for non-supporting browsers. We’ll be using CSS’s mask-image property to apply a splatter effect to text to get the following result:
但是现在，我们将创建一个仅在WebKit浏览器中可用的演示，并且为不支持的浏览器提供一个简单的备用。 我们将使用CSS的mask-image属性将飞溅效果应用于文本，以得到以下结果：
When we’re using CSS masks, we’re making the text take the shape of its mask image, instead of making the image take the shape of the text as with the background-clip technique above.
当我们使用CSS遮罩时，我们使文本采用其遮罩图像的形状，而不是像上面的background-clip技术那样使图像采用文本的形状。
The mask-image property takes one of three values: an image with alpha opacity, where the transparent areas will be the areas where no content will show, a CSS gradient, or none. For our demo, we’ll be using an image with alpha opacity, which looks like the following:
mask-image属性采用以下三个值之一：具有alpha不透明度的图像，其中透明区域将是不显示任何内容的区域，CSS渐变或none 。 对于我们的演示，我们将使用具有Alpha不透明度的图像，如下所示：
The image represents a bunch of paint splatters that we want to apply to the text to make it look like it’s got some watercolor paint on it. Non-supporting browsers will simply display the text without the splatter effect applied to it.
该图像表示一堆油漆飞溅，我们希望将其应用于文本以使其看起来像上面带有水彩颜料。 不支持的浏览器将仅显示文本，而不会对其施加飞溅效果。
When you apply this mask to your text, or to any other content, the text will be visible where the black splatters are, and the parts where the mask image is transparent the text will not show. You can imagine your text (or content) as a layer and the mask as another layer, and then imagine placing the mask image on top of the text, and then get an eraser and start erasing all the parts of the text that are not covered by those black spots, then you’ll end up with the masked text as shown in the demo’s screenshot above.
当您将此蒙版应用于文本或任何其他内容时，在出现黑色飞溅的地方文本将可见，而蒙版图像透明的部分将不会显示文本。 您可以将文本(或内容)想象为一层，将遮罩想象为另一层，然后想象将遮罩图像放置在文本顶部，然后使用橡皮擦并开始擦除文本中未被覆盖的所有部分那些黑点，那么您最终将得到蒙版的文本，如上面的演示屏幕截图所示。
To make the effect more realistic, I added a watercolor background to the element containing that text, which will show through the text where it has been “erased”, therefore nicely blending the text with its background. All of this, using CSS only. Pretty neat, right? Too bad browser support is still very low at the moment. But we’ll go over recreating this effect to work cross-browser in the next section.
为了使效果更逼真，我在包含该文本的元素中添加了水彩背景，该背景将通过文本显示“擦除”的位置，因此可以很好地将文本与背景混合在一起。 所有这些，仅使用CSS。 很整洁吧？ 目前，糟糕的浏览器支持仍然非常低。 但是在下一节中，我们将继续介绍如何重新创建此效果以跨浏览器工作。
Now, for our demo, we have a container wrapping two headings:
现在，对于我们的演示，我们有一个包含两个标题的容器：
<div class="container>
<h1>Art</h1>
<h2>Digital Magazine</h2>
</div>
We’ll be applying the splatter effect to the h1 element. Here’s the relevant CSS for our effect:
我们将对h1元素应用飞溅效果。 以下是与我们相关CSS：
.container h1 {
font: 35em/100% "Oswald", sans-serif;
margin: 0 auto;
padding: 0;
text-align: center;
color: #fff;
/* the property that creates the splatter effect */
-webkit-mask-image: url(../img/splatter-mask_1.png);
mask-image: url(../img/splatter-mask_1.png);
}
And that’s all you need to achieve that effect. Now, of course you’ll want to add some extra styling like I did in the demo, depending on the overall effect you’re after, but that one line of CSS is what’s important when you use a mask to add texture to text.
这就是您要达到那种效果所需要的。 现在，当然，您将需要像在演示中一样添加一些额外的样式，具体取决于您要获得的整体效果，但是当您使用蒙版向文本添加纹理时，CSS的一行很重要。
One important thing to note here is that when this property is implemented in other browsers, a -webkit- prefix may or may not be the only prefix you need. You need to add the -webkit- prefix for this to work at the time of writing of this article, and if you do use this technique in a project, make sure to update your code whenever the spec or browser support changes.
这里要注意的一件事是，当在其他浏览器中实现此属性时， -webkit-前缀可能是也可能不是您唯一需要的前缀。 您需要添加-webkit-前缀才能使其在撰写本文时起作用，并且如果您确实在项目中使用了此技术，请确保在规格或浏览器支持发生更改时都更新代码。
Check out demo 2: Textured Text using mask-image.
查看演示2：使用mask-image的带纹理的文本。
The demo will fall back to a regular text over an image in non-supporting browsers.
在不支持的浏览器中，该演示将退回到图像上的常规文本。
You can read more about CSS Masking in the W3C spec, and check another example of subtle textured text in this post by Trent Walton.
您可以在W3C规范中阅读有关CSS Masking的更多信息，并在Trent Walton的这篇文章中查看另一个细微纹理文本的示例。
使用SVG创建纹理文本 (Creating textured text with SVG)
Both of the previous effects can be recreated using SVG, and the best thing about it is that the results obtained with SVG are cross-browser, so you can use the SVG method as a fallback for non-supporting browsers for the above CSS properties.
可以使用SVG重新创建之前的两种效果，最好的是，使用SVG获得的结果是跨浏览器的，因此您可以将SVG方法用作不支持上述CSS属性的浏览器的后备。
使用SVG <clippath>将背景剪切到文本 (Clipping A Background to Text using An SVG <clippath>)
First, we’re going to recreate the CSS background-clip: text effect using SVG’s <clippath> element.
首先，我们将使用SVG的<clippath>元素重新创建CSS background-clip: text效果。
A clipping path determines the shape or region where the background is going to be applied. The parts of the background that lie outside the defined shape will not be painted, and only those inside the given shape will be.
剪切路径确定将要应用背景的形状或区域。 位于定义形状外部的背景部分将不会绘制，只有给定形状内部的部分将被绘制。
A clipping path can take several values, one of which is a <text> element. When the clip path is set to a text element, the background will be clipped to the shape of the text used.
剪切路径可以采用多个值，其中一个是<text>元素。 当将剪切路径设置为文本元素时，背景将被剪切为所用文本的形状。
Once a clipping path is defined (we’ll get to the code in a minute), that path can be referenced using clip-path, either as an attribute of the image that we want to clip, or as a CSS property of that image.
一旦定义了剪切路径(我们将在一分钟内到达代码)，就可以使用clip-path引用该路径，该路径既可以是我们要剪切的图像的属性，也可以是该图像CSS属性。 。
Let’s start by defining the clip path that we want to use to clip our image, which in our case will be just a single word that we want our background image to show through.
让我们开始定义我们要用来裁剪图像的裁剪路径，在我们的例子中，这只是一个我们希望背景图片显示的单词。
First we create an SVG element which will contain all our SVG code. Then we’ll define our clip path and apply it to an image element via the clip-path attribute:
首先，我们创建一个包含所有SVG代码的SVG元素。 然后，我们将定义剪辑路径，并通过clip-path属性将其应用于image元素：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1200" height="400" viewBox="0 0 1200 400">
<!-- add title for accessibility -->
<title>Adding Background to Text using SVG clipPath</title>
<defs>
<clippath id="my-path">
<text x="50" y="300" font-size="200" >WATERCOLOR</text>
</clippath>
</defs>
<image xlink:href="img/watercolor_1.jpg" clip-path="url(#test)" width="100%" height="100%" preserveAspectRatio="none" />
</svg>
Because an SVG element is basically a graphic, make sure to include a title so that it’s accessible by screen readers.
由于SVG元素基本上是图形，因此请确保包含标题，以便屏幕阅读器可以访问它。
In the code above, we’ve created a text element, given it a font size, and defined the x and y coordinates which determine where the text will be drawn inside our SVG. Then, we’ve placed our text element inside a clippath element, which we’ve given an ID so that we’d be able to reference it. Then, we placed the clippath element inside a defs element. The defs element can be used to store content that will not be directly displayed. This stored hidden content can then be referenced and displayed by other SVG elements, which makes it ideal for things such as patterns that contain reusable graphics. And in our case, it’s perfect for defining our clip path that we want to reference in our image attribute.
在上面的代码中，我们创建了一个text元素，并为其指定了字体大小，并定义了x和y坐标，这些坐标决定了将在SVG中绘制文本的位置。 然后，我们将文本元素放置在clippath元素内，并为其指定了ID，以便我们可以引用它。 然后，我们将clippath元素放在defs元素内。 defs元素可用于存储不会直接显示的内容。 然后，此存储的隐藏内容可以被其他SVG元素引用和显示，这使其非常适合诸如包含可重复使用图形的图案之类的事情。 在本例中，它非常适合定义我们要在image属性中引用的剪辑路径。
Next, we added our image, gave it a width and a height, and set the preserveAspectRatio to none so that its aspect ratio does not get locked, because if it does, then the height and width won’t be applied to it if they don’t preserve its aspect ratio.
接下来，我们添加了图像，并为其设置了宽度和高度，然后将preserveAspectRatio设置为none以便其宽高比不会被锁定，因为如果锁定，则高度和宽度将不会应用于该图像不要保留其长宽比。
And last, we referenced the clipping path we defined by using the clip-path attribute on the image. The clip-path attribute takes the ID of the clippath element as its value, and applies the clipping path to the image.
最后，我们引用了使用图像上的clip-path属性定义的剪切路径。 clip-path属性将clippath元素的ID作为其值，并将剪切路径应用于图像。
Check out demo 3: Text background using SVG <clippath>.
Instead of applying the clip path to the image by referencing it with the clip-path attribute, you could also apply it via CSS like so:
除了通过使用clip-path属性引用图像来将剪切路径应用于图像之外，还可以通过CSS将其应用于图像，如下所示：
image {
clip-path: url(#my-path);
}
This should work as expected in all modern browsers: Chrome, Safari, Opera, Firefox and IE9+. So, if you do want to use the CSS background-clip: text; property you could, for example, check for browser support for background-clip: text using Modernizr, and provide the SVG as a fallback for non-supporting browsers, and this is kind of what Tim Pietrusky’s polyfill does, but instead of using a background image and clipping it using clippath, it uses an SVG pattern to fill the text with the background image that you would initially want to clip. In the next section, we’re going to go over filling a text with a pattern in SVG.
在所有现代浏览器(Chrome，Safari，Opera，Firefox和IE9 +)中，这都应该可以正常工作。 因此，如果您确实想使用CSS background-clip: text; 你可以，例如，物业检查适用于浏览器支持background-clip: text使用Modernizr的，并提供了SVG作为不支持的浏览器的回退，这是一种什么添Pietrusky的填充工具做，但是，而不是使用背景图像并使用clippath对其进行clippath ，它使用SVG模式将您最初要剪切的背景图像填充到文本中。 在下一节中，我们将继续使用SVG中的模式填充文本。
通过用SVG <pattern>填充文本来将背景应用于文本 (Applying a Background To Text By Filling It With An SVG <pattern>)
So another way we could apply a background or pattern to text is by filling the text with a pattern, instead of using a background image and clipping it to the text. For this demo, we’re going to fill our text with a wooden pattern which I got from SubtlePatterns.
因此，我们可以将背景或图案应用于文本的另一种方式是通过用图案填充文本，而不是使用背景图像并将其剪切到文本上。 对于此演示，我们将用从SubtlePatterns获得的木制图案填充文本。
Using an image and clipping it to text could be a great choice for when you’re using decorative fonts like we did in our first demo, where we wanted a big portion of the image to show through the text, because the image plays a role in defining the character of our demo. But sometimes, all we want to do is just add a simple and subtle pattern to text to give it that extra nice touch which makes it less dull. In that case, using SVG, we can define a pattern just like we defined a clipping path in the previous section, and then we can use that pattern to fill the text with it.
当您像在第一个演示中一样使用装饰字体时，使用图像并将其剪切为文本可能是一个不错的选择，在该演示中，我们希望图像的很大一部分通过文本显示，因为图像起着一定的作用定义演示的特征。 但是有时候，我们要做的只是在文本上添加一个简单而微妙的图案，以使其具有额外的优美手感，从而使它变得不那么沉闷。 在那种情况下，使用SVG，我们可以像上一节中定义的剪切路径一样定义模式，然后可以使用该模式来填充文本。
Similar to the previous demo, we have an SVG element with a title added for accessibility, a text element which we want to fill with the pattern, and a defs element which we’re going to use to define our pattern. The pattern consists of an image and has an ID that we’ll be using when we want to reference it and apply it to our text. We’re going to reference the pattern inside the text’s fill attribute, or via the text’s CSS fill property.
与先前的演示类似，我们有一个SVG元素，添加了标题以实现可访问性，一个我们要用该模式填充的text元素，以及一个我们将用来定义我们的模式的defs元素。 模式由image组成，并具有一个ID，当我们要引用它并将其应用于文本时将使用该ID。 我们将通过文本的fill属性或文本CSS fill属性引用模式。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="700" height="400" >
<!-- add title for accessibility -->
<title>Applying a patterned background to text in SVG</title> -->
<!-- Source: http://lea.verou.me/2012/05/text-masking-the-standards-way/ -->
<defs>
<pattern id="filler" patternUnits="userSpaceOnUse" width="400" height="400" >
<image xlink:href="img/purty_wood.png" width="1200" height="600" preserveAspectRatio="none" />
</pattern>
</defs>
<text x="100" y="70%" font-size="200" fill="url(#filler)">WOOD</text>
</svg>
And similar to the previous demo, you could reference the pattern via CSS like so:
与之前的演示类似，您可以通过CSS引用该模式，如下所示：
text {
fill: url(#filler);
}
See demo 4, which also works in all modern browsers, in action: Text background using SVG text fill with image.
实际上，请参见演示4，该演示在所有现代浏览器中也都适用：使用SVG文本填充image的文本背景。
At this point, it is worth noting that not only can you use an image as an SVG pattern, but because gradients are, as we mentioned before, also images, you can also create an SVG gradient and use that to fill the text, instead:
在这一点上，值得注意的是，不仅可以将图像用作SVG模式，而且因为渐变也像图像一样是图像，因此，您还可以创建SVG渐变并将其用于填充文本，而不是：
Creating and using a gradient in SVG is simple. A gradient is created as a radialGradient or linearGradient element, and is given an ID, and is then referenced in the fill attribute or CSS property like we did with the <pattern> above. Here’s a simple example where a gradient is used to fill the text.
在SVG中创建和使用渐变非常简单。 将渐变创建为radialGradient或linearGradient元素，并linearGradient指定一个ID，然后像上面的<pattern>一样在fill属性或CSS属性中对其进行引用。 这是一个简单的示例，其中使用渐变填充文本。
Check out demo 5 that shows text being filled with a gradient.
And of course, a gradient can also be set as the container’s background image, and then we can clip the background using clippath just like we did in the previous section.
当然，也可以将渐变设置为容器的背景图像，然后我们可以像上一节中一样使用clippath裁剪背景。
使用SVG <mask>将纹理应用于文本 (Applying Texture to Text Using an SVG <mask>)
Just like we can apply an image mask to an element using the CSS mask-image property, we can also apply the same masking concepts and get the same effects using SVG masks.
就像我们可以使用CSS mask-image属性将图像蒙版应用于元素一样，我们也可以应用相同的蒙版概念并使用SVG masks获得相同的效果。
An image with opaque and transparent areas would define where the element would be painted just like we saw in the previous section with the CSS mask-image property. There is one important difference, though, between CSS image masks and SVG image masks: SVG masks, unlike CSS masks, use the luminance values in a mask to determine what gets masked, not the alpha values. So an image that would be composed of black and transparent areas, for example, like the splatter mask we used above, would have to be replaced with an image composed of white and transparent areas. So, if we were to recreate the same splatter text effect that we created above, we would have to use a mask image that looks like the following:
具有不透明和透明区域的图像将定义元素的绘制位置，就像我们在上一节中使用CSS mask-image属性看到的那样。 但是，CSS图像蒙版和SVG图像蒙版之间存在一个重要区别：与CSS蒙版不同，SVG蒙版使用蒙版中的亮度值来确定要蒙版的内容，而不是alpha值。 因此，将由黑色和透明区域组成的图像(例如，我们上面使用的防溅蒙版)必须替换为由白色和透明区域组成的图像。 因此，如果要重新创建与上面创建的相同的飞溅文本效果，则必须使用类似于以下内容的蒙版图像：
>
>
An alpha channel image mask can be easily converted to a luminance image mask in Photoshop by applying a white color overlay which turns the black areas into white, and that is what I have done to replace the CSS image mask with this one suitable for SVG masks. The light gray areas visible in the above image are actually transparent, I just gave the image this background so you can see the white splatters which otherwise wouldn’t be visible on the white background of this post.
通过应用白色覆盖层将黑色区域变成白色，可以在Photoshop中将alpha通道图像蒙版轻松转换为亮度图像蒙版，这就是我用适合SVG蒙版CSS蒙版替换CSS蒙版所做的工作。 上图中可见的浅灰色区域实际上是透明的，我只是为该图提供了此背景，因此您可以看到白色的油渍，否则在该帖子的白色背景上将看不见。
Now, just like we defined our SVG clipping path and pattern, we can define our mask in a similar way and apply it to our text.
现在，就像定义SVG剪切路径和图案一样，我们可以以类似的方式定义蒙版并将其应用于文本。
We will create an image, wrapped inside an SVG mask element, which will get an ID so that it can be referenced, and the mask will be wrapped inside the defs element, which is used to define our mask without directly rendering it.
我们将创建一个包装在SVG mask元素内的image ，该image将获得一个ID，以便可以对其进行引用，并且该mask将被包装在defs元素内，该元素用于定义我们的遮罩而不直接渲染它。
So it’s like saying: we’re defining (defs) an SVG mask (mask) which is an image (image) with the following URL (URL to the luminance mask above), and then we’ll apply this mask to our text using the mask attribute on the text element, or, of course, via CSS using the mask property.
因此，就像说：我们要定义( defs )一个SVG蒙版( mask )，它是一个图像( image )，具有以下URL(上面的亮度蒙版的URL)，然后使用text元素上的mask属性，或者当然也可以通过CSS使用mask属性。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="380" >
<!-- add title for accessibility -->
<title>Adding Texture to Text using SVG Masks</title>
<defs>
<mask id="mask">
<image width="1200px" height="1200px" xlink:href="img/splatter-mask_luminance.png" preserveAspectRatio="none"/>
</mask>
</defs>
<text x="50" y="70%" font-size="168" fill="white" mask="url(#mask)">WATERCOLOR</text>
</svg>
And to complete the effect, I added the watercolor background to the main svg element to make it look like the text is blended into that background.
为了完成效果，我在主要的svg元素中添加了水彩背景，以使其看起来像文本已混入该背景中。
Check out the cross-browser result in demo 6.
在演示6中查看跨浏览器的结果。
If you want you can read more about combining CSS and SVG masks in this excellent article by Christian Schaefer on The Nitty Gritty blog. There’s a lot more potential to SVG masking than this, as things can get quite interesting when you use animated Canvas-driven backgrounds, for example, as masks.
如果您愿意，可以在The Nitty Gritty博客上的Christian Schaefer的这篇出色文章中阅读有关组合CSS和SVG蒙版的更多信息。 SVG蒙版的潜力还不止于此，因为当您使用动画Canvas驱动的背景作为蒙版时，事情会变得非常有趣。
使用HTML5 <canvas>创建纹理文本 (Creating textured text with HTML5 <canvas>)
The last technique we’re going to go over uses the HTML5 <canvas> element to create the above effects. With <canvas>, you can also “clip” an element to the shape of another, “fill” text with texture, and apply a mask-like effect to text, by changing the value of the globalCompositeOperation property of the canvas context.
我们要讲的最后一种技术是使用HTML5 <canvas>元素来创建上述效果。 使用<canvas> ，还可以通过更改canvas上下文的globalCompositeOperation属性的值，将一个元素“裁剪”为另一个元素的形状，用纹理“填充”文本，并对文本应用类似蒙版的效果。
Before we get into the how of it, let’s define our markup, because it’s the same markup for the 3 techniques we’re going to cover.
在介绍它的方式之前，让我们定义标记，因为它与我们将要介绍的3种技术的标记相同。
We have a canvas element for which we specify a height and a width, and before the closing tag, we’re going to add a text content which will be available for screen readers to read, and for browsers that have JavaScript disabled to fall back to. One note here, though, is that Firefox does not display the text as a fallback for the canvas when JavaScript is disabled, which may be a bug.
我们有一个canvas元素，我们为其指定了一个高度和一个宽度，并且在结束标记之前，我们将添加文本内容，供屏幕阅读器和禁用了JavaScript的浏览器回退至。 不过，这里需要注意的是，在禁用JavaScript的情况下，Firefox不会将文本显示为画布的备用，这可能是一个bug 。
<canvas id="canvas" width=1000 height=600 >
Now that we have our markup ready, let’s start drawing some textured text!
现在我们已经准备好标记，让我们开始绘制一些带纹理的文本！
For our first demo, we’re going to create a text on our canvas, and fill it with a pattern of our choice to get the following result:
对于我们的第一个演示，我们将在画布上创建一个文本，并用我们选择的模式填充文本以获得以下结果：
We’re going to get our canvas element and its drawing context, and then we’re going to create an image, and use that image as the fill style for our text.
我们将获取画布元素及其绘图上下文，然后将创建一个图像，并将该图像用作文本的填充样式。
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//create image we're going to use as a fill pattern
var img = document.createElement("img");
img.src="img/water.jpg";
//draw the text
img.onload= function(){
drawText();
}
//function that draws the text and fills it with the texture from the img
function drawText() {
ctx.font = "bold 200pt Oswald";
ctx.fillStyle = ctx.createPattern(img, 'repeat');
ctx.textAlign = 'center';
var x = canvas.width / 2;
ctx.fillText("WATER", x, 400);
ctx.fill();
}
So, let’s go over the above code. All the drawing happens inside a function drawText. We’re going to define the font style in the context’s font property, and then using the context’s createPattern method, we’re going to create a pattern out of the image we created before, and we’re going to set that pattern as the value for the fillStyle property, which determines, of course, the fill style for the font. And last but not least, we’re going to actually draw the text on the canvas using the fillText method, which takes a string which is the content of the text we want to draw, and a couple of x and y coordinates, which, as you may have guessed, determine where on the canvas the text will be painted.
因此，让我们来看一下上面的代码。 所有绘图都发生在功能drawText 。 我们将在上下文的font属性中定义字体样式，然后使用上下文的createPattern方法，从之前创建的图像中创建一个模式，并将该模式设置为fillStyle属性的值，该属性当然确定字体的填充样式。 最后但并非最不重要的一点是，我们将使用fillText方法在画布上实际绘制文本，该方法采用一个字符串(即我们要绘制的文本的内容)以及两个x和y坐标，您可能已经猜到了，请确定将在画布上绘制文本的位置。
Check out demo 7 in action.
观看演示7 。
There’s one thing to note here: when you’re using a custom font inside your canvas, you may not be able to see that custom font rendered, because the canvas drawing may happen before the font has been loaded. To work around this, you could, for example, use a font loader like the Web Font Loader developed by the Typekit and Google developers, and draw on the canvas after the font has been loaded:
这里要注意一件事：当您在画布中使用自定义字体时，您可能无法看到渲染的自定义字体，因为画布绘制可能在加载字体之前进行。 要解决此问题，例如，可以使用由Typekit和Google开发人员开发的Web字体加载器之类的字体加载器，并在加载字体后在画布上绘制：
WebFontConfig = {
google: { families: [ 'Oswald' ] },
fontactive: function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = document.createElement("img");
img.src="img/water.jpg";
img.onload= function(){
drawText();
}
function drawText() {
ctx.font = "bold 200pt Oswald";
ctx.fillStyle = ctx.createPattern(img, 'repeat');
ctx.textAlign = 'center';
var x = canvas.width / 2;
ctx.fillText("WATER", x, 400);
}
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
The demo files will all use this technique but I’ll keep it simple here and only show you relevant function for the technique in the following examples.
演示文件将全部使用此技术，但在这里我将使其保持简单，仅在以下示例中向您展示该技术的相关功能。
Now, moving to the next technique, we’re going to create a clipping-like effect on our canvas by changing the value of the globalcompositeOperation property of our context. The final result will look like the following:
现在，转到下一个技术，我们将通过更改上下文的globalcompositeOperation属性的值在画布上创建类似剪贴的效果。 最终结果将如下所示：
The canvas context comes with the property globalcompositeOperation which defines the composite operations between what is known as the “source” and the “destination”. That is, it defines how what you want to draw will be blended with what is already drawn on the canvas. The source is what you want to draw, and the destination is what is already drawn before you set the globalCompositeOperation property. We can draw new elements or shapes behind existing shapes and mask off certain areas and even clear sections from the canvas using this property.
画布上下文带有属性globalcompositeOperation ，该属性定义了所谓的“源”和“目标”之间的复合操作。 也就是说，它定义了您要绘制的内容将如何与画布上已绘制的内容混合。 源是您要绘制的内容，目的地是在设置globalCompositeOperation属性之前已绘制的内容。 我们可以使用此属性在现有形状后面绘制新元素或形状，并遮盖某些区域，甚至遮盖画布上的清晰区域。
The globalCompositeOperation can take one of 16 values, each of these values is demonstrated clearly in a visual example on MDN, so check that out if you’re not familiar with this property yet, as those examples will help you understand the values we’re going to set next a lot better. Here’s a screenshot of the results of each of those values. In the demo’s source code, the destination is the blue rectangle which is drawn on the canvas first, and the source is the red circle which is drawn after the globalCompositeOperation value is set.
globalCompositeOperation可以采用16个值之一，并且在MDN上的直观示例中清楚地展示了每个值，因此请检查一下您是否还不熟悉此属性，因为这些示例将帮助您了解我们所使用的值下一个要好很多。 这是每个值的结果的屏幕截图。 在演示的源代码中，目标是首先在画布上绘制的蓝色矩形，源是在设置globalCompositeOperation值后绘制的红色圆圈。
The source-in value of this property could be translated in plain English to “draw only the parts/areas of the source and destination where they intersect”. So, if you have two elements, one drawn and another one that you want to draw, the result will be that only the areas where these two elements intersect will be painted.
该属性的source-in值可以翻译成英文，以“仅绘制源和目标相交的部分/区域”。 因此，如果您有两个元素，一个已绘制，另一个要绘制，则结果将是仅绘制这两个元素相交的区域。
To help understand this better, let’s get into the code right away.
为了更好地理解这一点，让我们立即进入代码。
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = document.createElement("img");
img.onload = function () {
drawText();
}
img.src="img/fire.jpg";
function drawText() {
// put text on canvas
ctx.font = "bold 180pt IM Fell Great Primer SC";
ctx.fillStyle = 'white';
ctx.textAlign = 'center';
var x = canvas.width / 2;
ctx.fillText("FIRE", x, 325);
// use compositing to draw the background image only where the text has been drawn
ctx.globalCompositeOperation = "source-in";
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
}
In the above code, inside the drawText function, we have 3 “sections” that define the result of what will be drawn on the canvas. The first section is where we define the text, including all its styles, and then we go ahead and draw it using the fillText method. Next, we set the globalCompositeOperation of our context to source-in. Then, we draw the image on the canvas.
在上面的代码中，在drawText函数内部，我们有3个“部分”定义了将在画布上绘制的结果。 第一部分是定义文本(包括所有样式)的位置，然后继续使用fillText方法绘制fillText 。 接下来，我们将上下文的globalCompositeOperation设置为source-in 。 然后，我们在画布上绘制图像。
So you see, the “source” in this case is the element that we want to draw after the globalCompositeOperation has been set (the image), and the “destination” is the text that we drew before we set it. And by setting the value to source-in, we’re telling the browser to draw the image only in the areas where this image intersects with the text, and that’s exactly how we get that clipping effect that we’re after.
因此，您会看到，在这种情况下，“源”是我们想要在设置globalCompositeOperation之后绘制的元素(图像)，而“目标”是我们在设置它之前绘制的文本。 通过将值设置为source-in ，我们告诉浏览器仅在该图像与文本相交的区域绘制图像，这正是我们要获得的剪裁效果的方式。
Once you wrap your head around each of the values of the globalCompositeOperation, you can start using them quickly and with ease, and, again, do make sure you check the visual examples on MDN, because they help a lot.
将头缠绕在globalCompositeOperation每个值上之后，您可以快速轻松地开始使用它们，并且再次确保您检查了MDN上的可视示例，因为它们有很大帮助。
When you do check them out, you’ll notice that if we set the value to source-atop, the result will be also the same for our demo. source-atop tells the browser to draw the parts/areas of the source (image) where it intersects with the destination (text), and also draw the remaining areas of the destination even those that do not intersect with the source, and in our case, that would also result in the same effect that we want.
当您将它们检出时，您会注意到，如果将值设置为source-atop ，则演示的结果也将相同。 source-atop告诉浏览器绘制与目标(文本)相交的源(图像)的部分/区域，并绘制目标的其余区域，即使那些与源不相交的区域也是如此。情况下，也将产生我们想要的相同效果。
View the live demo (demo 8) for this technique.
查看此技术的现场演示(演示8) 。
Note: at the time of writing of this article, not all values of the global composite operation property are supported across browsers. There are six modes that work across browsers (in Chrome, Safari, Firefox, and Opera): source-over, source-atop, destination-over, destination-out, lighter, and xor. You can read more about this here. And for more advanced examples of using the global composite operation property, check out this post on HTML5Rocks to learn more about creating some really cool typographic effects with canvas.
注意：在撰写本文时，并不是所有浏览器都支持全局复合操作属性的所有值。 在浏览器(Chrome，Safari，Firefox和Opera)中，有六种模式可使用：源转换，源上方，目标上方，目标输出，较亮和异或。 您可以在此处了解更多信息。 有关使用全局复合操作属性的更高级的示例，请查看HTML5Rocks上的这篇文章，以了解有关使用canvas创建一些非常酷的印刷效果的更多信息。
And last but not least, we’re going to create one more effect using canvas, but this time we’ll be adding some texture to the text to blend it into the background like we did in the previous techniques with SVG and CSS. The demo will look like the following:
最后但并非最不重要的一点是，我们将使用canvas创建另一个效果，但是这次我们将在文本中添加一些纹理，以将其混合到背景中，就像在先前使用SVG和CSS的技术中所做的那样。 该演示将如下所示：
We’re going to be using an image with alpha channels as our “mask”, and we want the text to be drawn only where it intersects with the black areas of the image, and to be “erased” where the image is transparent, right? So we want our source and destination to only be painted where they intersect with each other. According to this logic, and to the above screenshot of the globalCompositeOperation values, we’ll want to use the source-in value to get the result we’re after.
我们将使用带有alpha通道的图像作为“蒙版”，我们希望仅在与图像的黑色区域相交的地方绘制文本，并在图像透明的位置“擦除”文本，对？ 因此，我们希望仅将源和目的地绘制在彼此相交的位置。 根据此逻辑，以及上面的globalCompositeOperation值的屏幕截图，我们将要使用source-in值来获得我们想要的结果。
Below is the image that we’re using as a “mask”. The black areas are where the image is going to intersect with the text. Just like we did in the CSS masking section, you can imagine one layer for the text and another for this image, put them on top of each other, and then erase any part of the image or text where the two don’t intersect with each other, and you get the final effect resulting from the source-in global composite operation.
下面是我们用作“蒙版”的图像。 黑色区域是图像与文本相交的地方。 就像我们在CSS遮罩部分中所做的那样，您可以想象文本的一层和该图像的另一层，将它们放在一起，然后擦除图像或文本中不与之相交的任何部分对方，你从得到的最终效果source-in全球复合操作。
The Javascript code is the same as the one above, only the value of the globalCompositeOperation is different, so we’ll jump right to the live demo, where you can check out the source code and play with it.
Javascript代码与上述代码相同，只是globalCompositeOperation的值不同，因此我们将直接跳至实时演示，您可以在其中演示源代码并进行使用。
See the demo (demo 9) in action.
请参阅实际的演示(演示9) 。
And here again we added a background to our canvas to make the blending effect a little more realistic. We have a “scratched” background with scratched text that blend with each other nicely.
再一次，我们在画布上添加了背景，使混合效果更加逼真。 我们有一个“划痕”的背景，划痕的文本很好地融合在一起。
动画文字背景 (Animating Text Backgrounds)
Not only can text have a background, but you can actually animate this background and create some neat interactive effects with it. Because this article is focused on techniques for adding background/texture to text, we won’t be going over how to animate these backgrounds, because that could be a whole article on its own.
文本不仅可以有背景，而且实际上可以为该背景设置动画，并使用它创建一些简洁的交互效果。 因为本文的重点是为文本添加背景/纹理的技术，所以我们不会讨论如何为这些背景设置动画，因为这可能是一整篇文章。
Mary Lou has written an article where she experimented with the CSS background-clip: text property, and created some neat text background effects, so make sure to check them out!
Mary Lou撰写了一篇文章，尝试了CSS background-clip: text属性，并创建了一些简洁的文本背景效果，因此请务必将它们签出！
Trent Walton has also written an article where he goes over creating a text with a gradient background and animates that background resulting in a really nice and subtle effect.
特伦特·沃尔顿(Trent Walton)也写了一篇文章，他在其中继续创建具有渐变背景的文本，并对该背景进行动画处理，从而获得了非常不错的微妙效果。
And as always, Codepen includes some creative experiments using the CSS background-clip property with CSS animations, and among those I chose this really cool experiment by Lucas Bebber, in which he creates a nice effect of a text being filled with water, and provides a fallback for browsers that don’t support background-clip: text, so check that out as well and fiddle with the code, for there are some really cool techniques used to create the filling water effect.
和往常一样， Codepen包括一些使用CSS background-clip属性和CSS动画的创造性实验，其中我选择了卢卡斯·贝伯(Lucas Bebber)的这个非常酷的实验，他在其中创造了充满水的文本效果，并且提供了对于不支持background-clip: text浏览器的后退，因此请同时检查并检查代码，因为有一些非常酷的技术可用来创建填充水效果。
图像替换 (Image Replacements)
Because of the lack of browser support for a lot of the techniques used to create textured text effects, a lot of developers have been resorting to image replacement techniques to display graphical text.
由于浏览器对创建纹理文本效果的许多技术缺乏支持，因此许多开发人员一直在使用图像替换技术来显示图形文本。
There have been a lot of techniques available throughout the years, and Chris Coyier has done a great job collecting all of these techniques with their pros and cons in what he called the CSS Image Replacement Museum.
这些年来，已经有很多技术可用，克里斯·科耶尔(Chris Coyier)在他称之为CSS Image Replacement Museum的CSS图像替换博物馆(CSS Image Replacement Museum)中收集了所有这些技术的优缺点，做得很好。
If you do not want to use any of the above techniques to create “graphical” text effects, and want to use one of the image replacement techniques available, you should also have a look at the newest of all techniques, a great technique by Scott Kellum, the one he called “The New Kellum Method”, in which he suggests using sort of an “empty” font, so to speak, which is a font which can be defined with the @font-face rule, and whose characters have no width and no marks, making the text invisible, and therefore allows you to avoid all the other techniques where you would need to hide the original text to make only the text’s background show.
如果您不想使用上述任何一种技术来创建“图形”文本效果，并且想要使用一种可用的图像替换技术，则还应该了解所有最新技术，这是Scott的一项出色技术Kellum，他称之为“新Kellum方法”，他建议使用一种“空”字体，可以说这是一种可以使用@font-face规则定义的@font-face ，并且其字符具有没有宽度和标记，使文本不可见，因此可以避免所有其他技术，在这些技术中，您需要隐藏原始文本以仅显示文本的背景。
There are a lot of articles out there that elaborate on these image replacement techniques, and because these techniques are outside the scope of this tutorial which is aimed at showing techniques to create graphical text without having to replace it with an image, I’m only going to list a few resources that I recommend reading if you want to know more about (or use) an image replacement:
那里有很多文章详细介绍了这些图像替换技术，并且由于这些技术不在本教程的讨论范围之内，该教程旨在展示无需用图像替换图形文本即可创建图形文本的技术，我只是如果您想进一步了解(或使用)图像替换，将列出一些我建议阅读的资源：
The CSS Image Replacement Museum on CSS-Tricks
CSS技巧上的CSS图像替换博物馆
Replacing The -9999px Hack (The Kellum Method) by Jeffrey Zeldman
替换Jeffrey Zeldman的-9999px Hack (Kellum方法)
Another CSS image replacement technique by Nicolas Gallagher
Nicolas Gallagher的另一种CSS图像替换技术
The New Kellum Method by Scott Kellum
Scott Kellum的新Kellum方法
最后的话(Final Words)
I hope you learned a new technique or two from this article. I think we covered most of the possible ways to to create textured text with CSS and HTML. My favorite technique has to be the SVG one, simply because of its wider browser support. And when the day comes that all browsers support CSS masks and the background-clip‘s text value, we can start using them without having to worry too much about providing fallbacks anymore, and then CSS would definitely be the best choice for us.
希望您从本文中学到了一两种新技术。 我认为我们介绍了使用CSS和HTML创建带纹理的文本的大多数可能方法。 我最喜欢的技术必须是SVG，因为它对浏览器的支持范围更广。 当所有浏览器都支持CSS遮罩和background-clip的text值的日子到来时，我们可以开始使用它们而不必担心过多提供后备，那么CSS绝对是我们的最佳选择。
I hope you found this article useful. Thank you for reading! =)
希望本文对您有所帮助。 感谢您的阅读！ =)
Do you know other techniques for adding textures to text? If you do, make sure you share them in the comments below!
您知道其他为文本添加纹理的技术吗？ 如果这样做，请确保在下面的评论中分享它们！
翻译自: https://tympanus.net/codrops/2013/12/02/techniques-for-creating-textured-text/
unity创建纹理
3475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
