视屏剪辑背景音乐

Today we'll be looking at a fun technique to spice up our text, specifically our headers.

今天，我们将研究一种有趣的技术来增添我们的文本，特别是标题。

With this technique, we will be able to place a background image or gradient on our text. Even better, we are able to animate it!

使用此技术，我们将能够在文本上放置背景图像或渐变。 更好的是，我们可以制作动画 ！

Be sure to check out the to see the different techniques available.

请务必查看以查看可用的不同技术。

CSS技术：background-clip：text (The CSS Technique: background-clip:text)

The technique is very simple to implement. We just need to add a background (can be a gradient or image) to the text we want to affect. Then we just add the following lines:

该技术非常容易实现。 我们只需要向要影响的文本添加background （可以是渐变或图像）。 然后，我们只需添加以下几行：

h1 {  background:url(image_url_here);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}

That's all there is to it!

这里的所有都是它的！

Let's go ahead and create our demos now.

让我们继续并立即创建演示。

入门 (Getting Started)

Here is the foundation HTML for our demos. We just need an h1 tag.

这是我们的演示的基础HTML。 我们只需要一个h1标签。

"The moment you doubt whether you can fly, you cease for ever to be able to do it." - J.M. Barrie

Here's the foundation CSS that we'll need also:

这是我们还需要的基础CSS：

@import url(http://fonts.googleapis.com/css?family=Chango);body {  padding-top:50px;}h1 {  font-family:'Chango';  font-size:50px;    -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}

We are just centering things and grabbing a Google Font that gives our text a lot of room to show off its background.

我们只是将内容居中，并使用Google字体，它使我们的文本有很大的空间来炫耀其背景。

Now let's get on to each specific demo.

现在，让我们继续每个特定的演示。

Images are taken from

图像是从不图像中拍摄的

Since this demo will only work in -webkit-, we'll just be focusing on those prefixes. In production, you'll want to be sure to support all browsers and have fallbacks.

由于此演示仅在-webkit-中有效，因此我们仅关注这些前缀。 在生产中，您将需要确保支持所有浏览器并具有后备功能。

演示1：背景图像悬停动画 (Demo 1: Background Image Hover Animation)

The things that we need to do in this are:

在此中，我们需要做的事情是：

• change body background image
  更改身体背景图片
• add background image to text
  将背景图像添加到文本
• set hover change
  设置悬停更改

Here's the full code for this:

这是完整的代码：

@import url(http://fonts.googleapis.com/css?family=Chango);body {  padding-top:50px;  background:url(https://cask.scotch.io/2014/11/broken-plane.jpg);  /* make our image 100% width */  background-size:cover; }h1 {  font-family:'Chango';  font-size:50px;    -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  /* set the background image */  background:url(https://cask.scotch.io/2014/11/mountain1.jpg);  background-position:bottom;  background-size:cover;  /* set the transition speed */  transition:2s ease all;}/* handle what happens on hover */h1:hover {  background-position:top;}

And that's it! We set the transition and what happens on hover so now our background will make its move as we hover. Try changing out the transition time and background images to see what kind of effect you can create.

就是这样！ 我们设置了过渡以及悬停时发生的事情，因此现在我们的背景将随着悬停而发生变化。 尝试更改过渡时间和背景图像，以查看可以创建什么样的效果。

演示2：动画渐变 (Demo 2: Animating a Gradient)

The only difference in this demo is that we will use a gradient and an animation to make the entire gradient background move.

此演示中的唯一区别是，我们将使用渐变和动画来移动整个渐变背景。

Here's the code for this :

这是此的代码：

@import url(http://fonts.googleapis.com/css?family=Chango);body {  padding-top:50px;  background:url(https://cask.scotch.io/2014/11/person.jpg);  /* make our image 100% width */  background-size:cover; }h1 {  font-family:'Chango';  font-size:50px;    -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  /* set the background gradient */  background:-webkit-linear-gradient(top, #2c539e 0%,#37AAC6 50%,#2c539e 100%);  /* set the animation */  -webkit-animation:moving 20s ease infinite;}/* create the animation */@-webkit-keyframes moving {  0% {    background-position: 0 0;  }  100% {    background-position: 0 500px;  }}​

That's it! Now we have a really annoying glowing gradient text. We've made it this annoying for the demo, but this could be used for a very subtle effect.

而已！ 现在，我们有了一个非常烦人的发光渐变文本。 我们已经使这个演示很烦人了，但这可以用于非常微妙的效果。

演示3：动画背景图像 (Demo 3: Animating a Background Image)

We'll be using the same animation here that we used in demo 2. Here's the code for this :

我们将在此处使用与演示2中相同的动画。这是此的代码：

@import url(http://fonts.googleapis.com/css?family=Chango);body {  padding-top:50px;  background:url(https://cask.scotch.io/2014/11/silhouette.jpg);  /* make our image 100% width */  background-size:cover; }h1 {  font-family:'Chango';  font-size:50px;    -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  /* set the background gradient */  background:url(https://cask.scotch.io/2014/11/galaxies.jpg);  background-size:cover;  /* set the animation */  -webkit-animation:moving 20s ease infinite;}/* create the animation */@-webkit-keyframes moving {  0% {    background-position: 0 0;  }  100% {    background-position: 0 500px;  }}​

This is the most subtle of our 3 demos, and has a neat effect of the space background.

这是我们3个演示中最微妙的，并且具有空间背景的整洁效果。

结论 (Conclusion)

It's a very simple technique, that if used correctly, could yield a subtle and powerful effect. Use your imagination and see the cool things that background-clip:text will let you create.

这是一种非常简单的技术，如果正确使用，可能会产生微妙而强大的效果。 发挥您的想象力，看看background-clip:text将使您创造的精彩事物。

翻译自:

视屏剪辑背景音乐