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的效果,是不是很酷呀。

本文示例:链接1 链接2
本文代码地址:链接1

您也可能喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注