置剪辑板文本

With the CSS property “background-clip: text” (which is currently only supported in Webkit browsers), we can add a background image to a text element. Today we will experiment with it and create some fun examples by adding CSS3 transitions.

使用CSS属性“ background-clip：text”(当前仅在Webkit浏览器中支持)，我们可以将背景图像添加到text元素。 今天，我们将对其进行试验，并通过添加CSS3过渡来创建一些有趣的示例。

The images in the first demo are by Andreas Preis and the image in the last demo is by Joanna Kustra.

第一个演示中的图像由Andreas Preis提供，最后一个演示中的图像由Joanna Kustra提供。

标记 (The Markup)

The structure will simply be an h3 heading element with a wrapper:

该结构将只是带有包装的h3标题元素：

<div class="it-wrapper">
<h3>Andreas</h3>
</div>

We’ll be applying the class “it-animate” to the wrapper with jQuery in order to show the transitions.

我们将使用jQuery将“ it-animate”类应用于包装器，以显示过渡效果。

例子1 (Example 1)

In the first example we want to add two background images. Initially we want the images to occupy all the word, so we’ll set the background size to 100%. Since we are only giving one value, the second value, i.e. the vertical “stretch”, will be auto. This means that the image will preserve its aspect ratio while fitting horizontally into the h3 element.

在第一个示例中，我们要添加两个背景图像。 最初，我们希望图像占据所有单词，因此我们将背景大小设置为100％。 由于我们仅给出一个值，因此第二个值(即垂直“拉伸”)将是自动的。 这意味着图像将在保持水平方向适合h3元素的同时保留其长宽比。

When using a background image and setting the background-clip to “text”, we need to make sure that the color of the text is either transparent or semi-transparent in order to be able to see the image. We’ll use a rgba value which allows us to set an opacity.

使用背景图像并将背景剪辑设置为“文本”时，我们需要确保文本的颜色是透明或半透明的，以便能够看到图像。 我们将使用允许设置不透明度的rgba值。

We’ll also add a semi-transparent white text-stroke where the images will shine through.

我们还将添加一个半透明的白色文字笔触，图像将通过该笔触发光。

The initial position of the background images will be centered.

背景图像的初始位置将居中。

.it-wrapper h3{
font-size: 320px;
line-height: 188px;
padding: 60px 30px 30px;
color: rgba(67, 201, 117, 0.9);
font-family: 'BebasNeueRegular', Arial, sans-serif;
text-shadow: 10px 10px 2px rgba(0,0,0,0.2);
-webkit-text-stroke: 10px rgba(255,255,255,0.6);
background-color: #fff;
background-repeat: no-repeat;
background-image: url(../images/2.jpg), url(../images/1.jpg);
background-position: 50% 50%;
background-size: 100%;
-webkit-background-clip: text;
/* let's assume that one day it's supported */
-moz-background-clip: text;
background-clip: text;transition: all 0.5s linear;
/* for now, let's just add some niceness for Firefox */
-moz-border-radius: 30px;
-moz-box-shadow: 0px 0px 1px 8px rgba(67, 201, 117, 0.2);
}

For Firefox we want to add some kind of fallback. Although the background-clip for the text will not work here, we can still make the background image animate in a pretty nice way. So, we’ll leave the background image, but add some nice border radius and some box shadow for Firefox only.

对于Firefox，我们希望添加某种后备。 尽管文本的背景剪辑在这里不起作用，但我们仍然可以以非常不错的方式使背景图像动画。 因此，我们将保留背景图片，但仅为Firefox添加一些不错的边框半径和一些框阴影。

(If you are wondering what’s happening in IE don’t get too excited, we’ve just added a stylesheet that will simply override the color of the text and remove the background image.)

(如果您想知道IE中发生的事情不会太激动，我们只是添加了一个样式表，该样式表将简单地覆盖文本的颜色并删除背景图像。)

The properties that we want our text to transition to are the following:

我们希望文本过渡到的属性如下：

.it-wrapper h3.it-animate{
background-size: 50%;
background-position: 0% 50%, 130% 50%;
color: rgba(242, 208, 20, 0.4);
-moz-box-shadow: 0px 0px 1px 8px rgba(242, 208, 20, 0.4);
}

The background size for the images will be reduced to 50% and we’ll change the background position in order to move one image to the left and the other to the right side. We’ll also change the color.

图片的背景尺寸将减少到50％，我们将更改背景位置，以便将一张图片向左移动，另一张向右侧移动。 我们还将更改颜色。

For Firefox we want the box shadow color to change.

对于Firefox，我们希望更改框阴影的颜色。

例子2 (Example 2)

In the second example, we’ll play around with gradients. Of course, we don’t have to go extremely nuts with the colors, but hey, it’s a gradient: let’s make a freakin’ rainbow!

在第二个示例中，我们将处理渐变。 当然，我们不必花太多的力气，但是，嘿，这是一个渐变：让我们做一个怪异的彩虹！

I’ll omit the vendor prefixes for the gradients here, just check out the download file.

在这里，我将省略渐变的供应商前缀，只需检查下载文件即可。

The first background image is a linear gradient with lots of colors and the second one is a repeating linear gradient with stripes.

第一个背景图像是具有很多颜色的线性渐变，第二个背景图像是带有条纹的重复线性渐变。

If you want to easily create your own gradients, you should give the Ultimate CSS Gradient Generator from ColorZilla. It’s really awesome and you can choose different color formats and easily custom build your gradient. If you use Photoshop, you will instantly know how to use this.

如果要轻松创建自己的渐变，则应使用ColorZilla提供的Ultimate CSS Gradient Generator 。 这真的很棒，您可以选择不同的颜色格式并轻松自定义构建渐变。 如果使用Photoshop，您将立即知道如何使用它。

And check out Lea Verou’s CSS3 Patterns Gallery for more ideas on what can be achieved with gradients!

并查看Lea Verou的CSS3模式库，了解有关渐变可以实现的更多信息！

The background size for both gradients will be three times the size of our word in length and 100% in height.

这两个渐变的背景大小将是我们单词长度和高度100％的三倍。

.it-wrapper h3{
font-size: 270px;
line-height: 180px;
padding: 30px 30px 40px;
color: rgba(255,255,255,0.1);
font-family: 'Fascinate', 'Arial Narrow', Arial, sans-serif;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
background:
linear-gradient(
left,
rgba(105,94,127,0.54) 0%,
rgba(255,92,92,0.57) 15%,
rgba(255,160,17,0.59) 27%,
rgba(252,236,93,0.61) 37%,
rgba(255,229,145,0.63) 46%,
rgba(111,196,173,0.65) 58%,
rgba(106,132,186,0.67) 69%,
rgba(209,119,195,0.69) 79%,
rgba(216,213,125,0.7) 89%,
rgba(216,213,125,0.72) 100%
),
repeating-linear-gradient(
-45deg,
rgba(255,255,255,0.5),
transparent 20px,
rgba(255,255,255,0.3) 40px
);background-size: 300% 100%;
background-position: center left, top left;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
transition: all 1.8s linear;
-moz-border-radius: 90px 15px;
-moz-box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.4);
}

For Firefox we’ll again add some border radius and some box shadow.

对于Firefox，我们将再次添加一些边框半径和一些框阴影。

We then want the background position and the color to change. The change of the position will make the gradients move and we’ll be able to see the other end of the rainbow gradient:

然后，我们要改变背景位置和颜色。 位置的变化将使渐变移动，我们将能够看到彩虹渐变的另一端：

.it-wrapper h3.it-animate{
background-position: center right, top right;
color: rgba(39,137,149,0.5);
-moz-box-shadow: 0px 0px 0px 10px rgba(39,137,149, 0.9);
}

For Firefox we’ll animate the box shadow color to match with the text color.

对于Firefox，我们将为框阴影颜色设置动画以使其与文本颜色匹配。

例子3 (Example 3)

In our last example, we want to animate the background image size from huge to 100%. The idea is to not be able to see the background image’s motive until the transition takes place. The size of the background image will shrink to the point that we can recognize the image.

在我们的最后一个示例中，我们希望对背景图像的大小进行动画处理(从巨大到100％)。 这个想法是要等到转换发生后才能看到背景图片的动机。 背景图像的尺寸将缩小到我们可以识别图像的程度。

.it-wrapper h3{
font-size: 180px;
line-height: 180px;
padding: 20px 30px;
color: rgba(0,80,81,0.7);
-webkit-text-stroke: 2px rgba(0,0,0,0.5);
font-family: 'Gravitas One', 'Arial Narrow', Arial, sans-serif;
text-shadow: 15px 15px 1px rgba(255,255,255,0.3);
background-image: url(../images/3.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: 400%;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
transition: all 0.3s linear;
-moz-box-shadow:
-10px -10px 0px rgba(255,255,255,0.4),
10px 10px 0px rgba(0,81,81,0.4),
0px 0px 50px 50px rgba(255,255,255,0.9) inset;
}

Besides the background size, we’ll also change the opacity level of the rgba value, and add some fancy box shadow transition for Firefox:

除了背景大小，我们还将更改rgba值的不透明度级别，并为Firefox添加一些精美的框阴影过渡：

.it-wrapper h3.it-animate{
background-size: 100%;
color: rgba(0,80,81,0.1);
-moz-box-shadow:
-20px -20px 0px rgba(255,255,255,0.4),
20px 20px 0px rgba(0,81,81,0.4),
0px 0px 40px 0px rgba(255,255,255,0.4) inset ;
}

And that’s it! I hope you enjoyed this experiment and find it inspiring!

就是这样！ 希望您喜欢这个实验并从中得到启发！

进一步了解background-clip：文字 (Read more about background-clip: text)

• Show Image Under Text (with Acceptable Fallback) by Chris Coyier

  克里斯·科耶尔(Chris Coyier )在文字下显示图像(具有可接受的后备)

• CSS3 Background-Clip: Text by Trent Walton

  CSS3背景剪辑： Trent Walton撰写的文字

• Fun with -webkit-background-clip and @font-face on CSSReset.com

  与CSSReset.com上的-webkit-background-clip和@ font-face一起玩

• background-clip: text on Surfin’ Safari by Dave Hyatt

  背景剪辑： Dave Hyatt在Surfin'Safari上的文字

翻译自: https://tympanus.net/codrops/2011/12/12/experiments-with-background-clip-text/

置剪辑板文本