CSS-背景裁剪

最近一直忙着看ES6（懒），好久都没更新博客（不想写），难得下午抽空写写。
好了，今天的是文字对背景图片的裁剪，以及一些衍生的小东西。

background-clip:

background-clip 属性规定背景的绘制区域。其值主要有四个

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

顾名思义剪切掉边框的背景，剪切掉外边距的背景，剪切掉内容的背景，剪切掉文字外背景

当然最后一个比较特殊，需要比较高级的浏览器才能看到。

-webkit-text-fill-color:

检索或设置对象中的文字填充颜色，通过text-fill-color属性，可以做出一些例如渐变文字和镂空文字的效果。上面的配合-webkit-text-fill-color: transparent;属性可以让文字的填充色变成透明，透过文字看到背景。

background-position:

background-position 属性设置背景图像的起始位置。这三者结合起来会产生什么效果呢？（请用谷歌浏览器观看）

.text2 {
        width: 720px;
        background-image: -webkit-linear-gradient(top, #fc0, #f30 50%, #c00 51%, #600);
        -webkit-background-clip: text;
        font-size: 80px;
        -webkit-text-fill-color: transparent;
        font-weight: bold;
        background-repeat: no-repeat;
        background-position: -800px 0;
        animation: loop 10s linear infinite;
}
@keyframes loop {
        0% {
                background-position: -800px 0;
        }
        100% {
                background-position: -0 0;
        }
}

很像卡拉OK的效果，是不是很酷呀。

本文代码地址:链接