background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框下面。
如果没有设置背景图片或背景颜色,那么这个属性只有在边框透明或半透明时才能看到视觉效果,否则,本属性产生的样式变化会被边框覆盖。
属性值:
border-box:背景被裁剪到边框盒。
padding-box:背景被裁剪到内边距框。
content-box:背景被裁剪到内容框。
text:文字之外的背景区域都将被裁剪掉,如需看到文本背后的背景,需要设置文字颜色为透明的。
.clip-text {
background: url(http://i.giphy.com/fsULJFFGv8X3G.gif);
background-size: cover;
background-position: center;
-webkit-background-clip: text;
color: transparent; // 设置为透明,否则将看不到背景
width: 300px;
height: 100px;
box-sizing: border-box;
font-size: 58px;
font-weight: bold;
text-align: center;
line-height: 100px;
flex-shrink: 0;
}
background-clip: text 文字渐变色
div {
margin: 50px auto;
font-size: 54px;
font-weight: bold;
text-align: center;
text-transform:uppercase;
color: transparent;
background: linear-gradient(0, #009688 0%, yellowgreen 100%);
// background: url('https://unsplash.it/1200/400?image=1067') no-repeat;
background-size: cover;
background-position: center center;
-webkit-background-clip: text;
}
背景渐变动画 && 文字裁剪
.text {
margin: 0 auto;
width: 500px;
line-height: 100px;
font-family: 'Arial', sans-serif;
text-align: center;
z-index: 1;
font-size: 80px;
font-weight: bold;
background: linear-gradient(90deg, red 0, orange 15%, yellow 30%, green 45%, teal 60%, blue 75%, purple 90% ,purple 100%);
-webkit-background-clip: text;
color: transparent;
animation: changeColor .5s linear infinite alternate;
}
@keyframes changeColor {
0% {
background: linear-gradient(90deg, red 0, orange 15%, yellow 30%, green 45%, teal 60%, blue 75%, purple 90% ,purple 100%);
-webkit-background-clip: text;
}
50% {
background: linear-gradient(90deg, deeppink 0, yellowgreen 15%, fuchsia 30%, lime 45%, olive 60%, aqua 75%, coral 90% ,brown 100%);
-webkit-background-clip: text;
}
100% {
background: linear-gradient(-90deg, red 0, orange 15%, yellow 30%, green 45%, teal 60%, blue 75%, purple 90% ,purple 100%);
-webkit-background-clip: text;
}
}
按钮填充效果
.btn {
position: relative;
width: 100px;
margin: 50px auto;
text-align: center;
padding: 0 2rem;
font-family: 'Arial', sans-serif;
font-size: 36px;
line-height: 4.5rem;
color: deeppink;
background-color: deeppink;
border: 3px solid deeppink;
cursor: pointer;
&:after {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 50%;
height: 100%;
width: 0;
background-color: deeppink;
transition: width .5s, left .5s;
}
&:hover {
color: white;
}
&:hover:after {
top: 0;
left: 0;
width: 100%;
transition: width .5s, left .5s;
}
}
.btn {
background-image: linear-gradient(white, white);
background-repeat: no-repeat;
background-size: 0% 100%;
background-position: center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: background-size .5s;
&:hover {
background-size: 100% 100%;
}
}
图片窥探效果
<div>
<div class="mask"></div>
<p>·</p>
</div>
$img: "http://static.2144gy.com/www/static_img/20180929/pft9n5hp.jpg";
div {
position: relative;
margin: 0 auto;
width: 960px;
height: 600px;
}
.mask {
width: 100%;
height: 100%;
background: url($img) no-repeat center center;
background-size: cover;
filter: blur(10px);
transition: .3s;
}
p {
position: absolute;
top: 0%;
left: 0;
width: 100%;
height: 100%;
text-align: center;
z-index: 1;
font-size: 180px;
font-weight: bold;
background: url($img) no-repeat center center;
background-size: cover;
text-shaodw: 2px 2px 2px 2px #fff;
-webkit-background-clip: text;
color: transparent;
animation: move 4s ease-in infinite alternate;
}
@keyframes move {
0% {
line-height: 100px;
font-size: 100px;
}
100% {
line-height: 600px;
font-size: 1500px;
}
}