2013-08-01css3背景(六)—background-clip

    您现在的位置是:首页 > 学无止境 > CSS3|Html5

    background-clip

    说明:background-clip 指定对象的背景图像向外裁剪的区域。

    1padding-box:从padding区域(不含padding)开始向外裁剪背景。

    2border-box:从border区域(不含border)开始向外裁剪背景。

    3content-box:从content区域开始向外裁剪背景。

    4text:从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果

    用法:

    从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>

关键字词:css3,css,background-clip,文字遮罩,遮罩