您现在的位置是:首页 > 博客网站制作 > CSS3|Html5CSS3|Html5

css3背景(六)—background-clip

杨青青2013-08-01【CSS3|Html5】人已围观

简介background-clip用来制作文字的遮罩效果还是不错的,目前只有Safari 和Chrome浏览器支持该属性。background-clip说明:background-clip 指定对象的背景图像向外裁剪的区域。1)padding-box:从padding区域(不含padding)开始向外裁剪背景。

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>

Tags:css3   css   background-clip   文字遮罩   遮罩

很赞哦! ()

文章评论

站点信息

打赏本站

  • 如果你觉得本站很棒,可以通过扫码支付打赏哦!
  • 微信扫码:你说多少就多少~
  • 支付宝扫码:你说多少就多少~

客服在线

服务时间

周一至周日 9:00-21:00