您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 background-clip

2018-7-21 01:37| 作者: admin| 查看: 974| 评论: 0|来自: 蚂蚁部落

CSS3 background-size一章节强调过如下两个事实:

(1).CSS3属性和CSS2属性相比要难一些。

(2).学习需要正确的方式和技巧。

第一眼看到background-clip属性也许会懵逼,但仔细分析属性名组成,可以对它的作用有一个感性的猜想。

clip翻译成中文具有“修剪”的意思,此属性的作用恰如其名,就是用来“修剪”背景图片在哪些区域显示。

语法结构:

[CSS] 纯文本查看 复制代码
background-clip:border-box|padding-box|content-box|text|no-clip

一.border-box属性值:

此属性值(默认值)规定,背景图片可以在边框范围内显示。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
ul li{
  border:10px dashed green;
  width:150px;
  height:100px;
  padding:10px;
  margin-top:10px;
  list-style:none;
  background-repeat:no-repeat;
}
.border-box{
  background-clip:border-box;
  background-image:url(mytest/demo/small.jpg);
}
</style>
</head>
<body>
<ul class="test">
  <li class="border-box"></li>
</ul>
</body>
</html>

背景图片可以在边框中显示,但左部和上部的边框中没有显示背景图片,因为受background-origin属性的限制,因为此属性规定背景图片从哪个区域开始绘制,默认,从padding区域开始绘制(含有padding)。

关于background-origin属性参阅CSS3 background-origin一章节。

二.padding-box属性值:

规定背景图片可以在padding范围内显示,这个时候背景图片就不能够在border范围内显示。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>background-clip属性-蚂蚁部落</title>
<style type="text/css">
ul li{
  border:10px dashed green;
  width:150px;
  height:100px;
  padding:10px;
  margin-top:10px;
  list-style:none;
}
.padding-box{
  background-clip:padding-box;
  background-image:url(mytest/demo/small.jpg);
  background-repeat:no-repeat
}
</style>
</head>
<body>
<ul class="test">
  <li class="padding-box"></li>
</ul>
</body>
</html>

由以上代码的表现可以看出,背景图片可以在padding范围内绘制,边框范围内就不可以绘制了。

三.content-box:

此属性规定背景图片可以在content区域,也就是除去padding和border的区域内显示。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>background-clip属性-蚂蚁部落</title>
<style type="text/css">
ul li{
  border:10px dashed green;
  width:150px;
  height:100px;
  padding:10px;
  margin-top:10px;
  list-style:none;
}
.content-box{
  background-clip:content-box;
  background-image:url(mytest/demo/small.jpg);
  background-repeat:no-repeat
}
</style>
</head>
<body>
<ul class="test">
  <li class="content-box"></li>
</ul>
</body>
</html>

由以上代码的表现可以看出,背景图片这个时候只能够在content范围内显示了。

四.text:

从前景内容的形状(比如文字)作为裁剪区域向外裁剪,也就是说只有前景内容的形状内显示背景图片,例如只有文字内显示背景。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>background-clip属性-蚂蚁部落</title> 
<style type="text/css"> 
ul li{ 
  border:10px dashed green; 
  width:250px; 
  height:200px; 
  padding:10px; 
  margin-top:10px; 
  list-style:none; 
  background-repeat:no-repeat; 
  font-size:60px;
  font-weight:900
} 
.border-box{ 
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;  
  /*color:transparent;*/
  background-image:url(mytest/demo/small.jpg); 
} 
</style> 
</head> 
<body> 
<ul class="test"> 
  <li class="border-box">蚂蚁部落</li> 
</ul> 
</body> 
</html>

由以上代码的表现可以看出,背景图片只在文字内显示,不过需要注意的是文字的text-fill-color或者color属性值要设置为transparent,否则的话背景图片会被遮挡。


鲜花

握手

雷人
1

路过

鸡蛋

刚表态过的朋友 (1 人)

上一篇:CSS3 background-size下一篇:CSS3 transition

最新评论

返回顶部