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

CSS background-clip

2019-11-21 00:53| 作者: admin| 查看: 582| 评论: 0|来自: 蚂蚁部落

background-clip属性用于规定元素背景能够绘制区域,对背景色、背景图片和渐变都有效。

掌握此属性的用法可以从其名称入手,background-clip由两个单词构成:

(1).background:翻译成汉语具有"背景"的意思。

(2).clip:翻译成汉语具有"修剪"的意思。

顾名思义,此属性用于"修剪"元素背景,也就是规定元素背景的绘制区域。

语法结构:

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

下面通过代码实例详细分析一个上述各个属性值的作用。

为了便于演示,下面的代码都是以背景颜色作为演示,与背景图片或者渐变原理相同。

一.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">
.ant{
  border:10px dashed green;
  width:150px;
  height:50px;
  padding:10px;
  margin-top:10px;
}
.border-box{
  background-clip:border-box;
  background-color:#ccc
}
</style>
</head>
<body>
  <div class="ant border-box"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/21/005423y3uoeu8ch0u9y1u7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

二.padding-box:

此属性值规定背景可以在内边距范围内绘制,不能在边框内绘制。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.ant{
  border:10px dashed green;
  width:150px;
  height:50px;
  padding:10px;
  margin-top:10px;
}
.border-box{
  background-clip:padding-box;
  background-color:#ccc
}
</style>
</head>
<body>
  <div class="ant border-box"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/21/005503fk0symmj99gogkdb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

此时,背景可以在内边距内绘制,但是不能在边框内绘制。

三.content-box:

此属性值规定背景可在内容区域绘制,不包括边框和内边距区域。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.ant{
  border:10px dashed green;
  width:150px;
  height:50px;
  padding:10px;
  margin-top:10px;
}
.border-box{
  background-clip:content-box;
  background-color:#ccc
}
</style>
</head>
<body>
  <div class="ant border-box"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/21/005646lah9tgnzzhnttatn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

四.text:

此属性值规定背景只能在文本前景内容中绘制。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.ant{
  border:10px dashed green;
  width:150px;
  height:50px;
  padding:10px;
  margin-top:10px;
  font-size:30px;
  font-weight:900
}
.border-box{
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-color:red;
}
</style>
</head>
<body>
  <div class="ant border-box">蚂蚁部落</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/21/005736wei9pknpekfvaqsq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

文字的text-fill-color或者color属性值要设为transparent,否则背景会被遮挡。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部