css3背景(六)—background-clip
时间:2020-08-23来源:杨青青个人博客作者:杨青青
background-clip
说明:background-clip 指定对象的背景图像向外裁剪的区域。
1)padding-box:从padding区域(不含padding)开始向外裁剪背景。
2)border-box:从border区域(不含border)开始向外裁剪背景。
3)content-box:从content区域开始向外裁剪背景。
4)text:从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果
用法:
从border区域(不含border)开始向外裁剪背景
div
{
background:url(bg.gif);
background-repeat:no-repeat;
background-clip:border-box;
}
兼容性:IE9, Firefox4.0-9.0, Opera11.50-11.60尚未支持text属性值
示例:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>CSS background-clip_CSS3</title> <style> h1{font-size:20px;} h2{font-size:16px;} p{width:200px;height:200px;margin:0;padding:20px;border:10px dashed #666;background:#aaa url(/skin/blog/images/logo.jpg) no-repeat;} .border-box p{background-clip:border-box;} .padding-box p{background-clip:padding-box;} .content-box p{background-clip:content-box;} .text p{width:auto;height:auto;background-repeat:repeat;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:bold;font-size:120px;} </style> </head> <body> <h1>background-clip</h1> <ul class="test"> <li class="border-box"> <h2>border-box</h2> <p>从border区域(不含border)开始向外裁剪背景</p> </li> <li class="padding-box"> <h2>padding-box</h2> <p>从padding区域(不含padding)开始向外裁剪背景</p> </li> <li class="content-box"> <h2>content-box</h2> <p>从content区域开始向外裁剪背景</p> </li> <li class="text"> <h2>text</h2> <p>从前景内容的形状作为裁剪区域向外裁剪背景</p> </li> </ul> </body> </html>
你觉得文章内容怎么样