CSS3 背景裁剪区域 background-clip属性

默认情况下，背景颜色的显示范围为 border-box 区域，不重复的背景图像的显示范围为 padding-box 区域，而重复的背景图像的显示范围为 border-box 区域。然而，有时候却希望控制背景的显示范围。

这时，就可以通过 background-clip属性用来定义元素背景的裁剪区域，即背景的显示范围，可选值有 border-box | padding-box | content-box，默认值为 border-box。

CSS中的裁剪区域跟 canvas 中的裁剪区域含义相同，设置裁剪区域后，只有落到裁剪区域内的内容会被显示，而落到裁剪区域外的内容不会被显示出来。

这里对每个取值定义了一个类，然后分别应用到一个容器，来看看 background-clip属性在不同取值下的表现。代码如下：

div {
width: 120px;
height: 90px;
padding: 20px;
border: 10px dashed #888;
background-color: yellow;
background-repeat: no-repeat;
background-image: url(img/bg.gif);
}
.border-box {
background-clip: border-box;
}
.padding-box {
background-clip: padding-box;
}
.content-box {
background-clip: content-box;
}

<div class="border-box"></div>
<div class="padding-box"></div>
<div class="content-box"></div>

上述代码的运行结果如图 4‑35 所示：

图4-35 background-clip属性效果

从上图可以看到，background-clip属性可以同时控制背景图像和背景色的显示范围，而background-origin 属性则不同，它只能控制背景图像，不能控制背景色。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

CSS3 背景裁剪区域 background-clip属性相关推荐

html设置gif为透明,使用GIF动图和CSS3背景裁剪（background-clip）特性实现的透明文本烟雾特效...
CSS 语言: CSSSCSS 确定 @import url('https://fonts.googleapis.com/css?family=Montserrat'); body { backgro ...
HTML5 Canvas 裁剪区域
裁剪区域 Canvas中的剪辑区域,是由路径所定义的一块区域,浏览器会把所有的绘图操作都限制在该区域内执行. Canvas中,使用clip()方法来设定剪辑区域,一旦设定好裁剪区域,则只有落在裁剪区域 ...
css禁止背景图拉伸_css3 background 新添属性让你的背景图不再拉伸而是随窗口变化而变化...
传统的页面制作中,当你遇到css2 的时候,如何来显示一张背景图呢?拉伸 (无节操的拉伸,容器长宽完全超出背景图的长宽) 重复展示(用无数张同样的图片来铺满容器的背景面积) x轴 /y轴重复展示(纵 ...
background复合属性顺序_background：常用背景属性（复合属性）
定义和用法 background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性:background-color | 背景颜色 background-position | 背 ...
CSS3 background-clip背景裁剪、CSS3 background-origin背景图片起点
background-clip属性指定背景绘制区域.指定显示背景的范围. 设置裁剪区域后,只有落到裁剪区域内的内容会被显示,而落到裁剪区域外的内容不会被显示出来. background-clip属性 ...
.net的label的背景如何设置成为透明_css如何设置背景图片？background属性添加背景图片...
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片.有一定的参考价值,有需要的朋友可以参考一下, ...
WPF 元素裁剪 Clip 属性
本文介绍如何在 WPF 使用 Clip 裁剪元素在 WPF 的 UIElement 提供了 Clip 属性,这个属性默认是空,但是如果设置了这个属性就会对元素进行裁剪这个属性是一个 Geometr ...
背景（background）属性
background(背景属性) background-attachment:背景图像是否固定或者随着页面的其余部分滚动 scroll:背景图片随着页面的其余部分滚动 fixed:背景图片是固定的 i ...
css如何设置背景图片？background属性添加背景图片
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片.有一定的参考价值,有需要的朋友可以参考一下, ...

CSS3 背景裁剪区域 background-clip属性

CSS3 背景裁剪区域 background-clip属性相关推荐

最新文章

热门文章