背景裁剪：background-clip

背景裁剪：background-clip

作用

background-clip：主要用来确定背景的剪裁区域，是针对元素背景颜色，背景图片进行裁剪

语法及属性值

语法： background-clip: border-box / padding-box / content-box ;

<div class="clip">
        <img src="./images/backimg.jpg" alt="">
    </div>

border-box

未在代码中使用background-clip时，默认为border-box ，剪切边框以外的背景，元素的背景从border区域（包括border）以内开始保留背景。

 .clip {
            width: 400px;
            margin: 100px auto;
            border: 20px solid skyblue;
            padding: 20px;
            background-color: pink;
            background-clip: border-box ;  
        }

        .clip img {
            width: 100%;
            /* 去掉底部缝隙 */
            vertical-align: middle;

        }

实现效果：

padding-box

 .clip {
            width: 400px;
            margin: 100px auto;
            border: 20px solid skyblue;
            padding: 20px;
            background-color: pink;
            background-clip: padding-box ;  
        }

实现效果：

content-box

.clip {
            width: 400px;
            margin: 100px auto;
            border: 20px solid skyblue;
            padding: 20px;
            background-color: pink;
            background-clip: content-box ;  
        }

实现效果：

text

<div class="clipbox">文字透明效果  background-clip:text </div>

 .clipbox {
            font-size: 30px;
            background-clip: text;
            background-image: linear-gradient(45deg, pink, rgb(26, 179, 31), skyblue);
            color: rgba(0, 0, 0, .3);
        }

实现效果：

文字透明效果 background-clip:text 在火狐上实现了效果