CSS3中背景属性background-clip

2019-06-01272次阅读css3css

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;
    }
}

上一篇: css实现按钮背景色渐变过渡  下一篇: CSS3 滤镜(Filter)使用小结  

CSS3中背景属性background-clip相关文章