背景裁剪: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 在火狐上实现了效果

posted @   丫丫learning  阅读(201)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示