css3.0 background-clip 背景的裁剪区域

最新推荐文章于 2024-02-06 18:41:34 发布

kevinlifeng

最新推荐文章于 2024-02-06 18:41:34 发布

阅读量8.9k

点赞数

文章标签： css border safari 浏览器 chrome xhtml

background-clip：用来确定背景的裁剪区域。
background-clip是css3.0中新增加的属性，一般喜欢将 background-clip与 background-origin和 background-size一起应用。其中 background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来确定背景的定位。 background-clip 用来确定背景的裁剪区域。而 background-origin 用来决定 background-position 计算的参考位置。

首先 background-clip在浏览器兼容性:

IE和遨游不支持(不知IE9是否支持)。
Firefox添加私有属性-moz-background-clip支持。
Safari和Chrome添加私有属性-webkit-background-clip支持。
Opera: 不支持background-clip属性，添加其私有属性-o-background-clip也不支持。

语法：background-clip ： border | padding | content

border：从border区域向外裁剪掉背景。（超出部分就被减掉） padding：从padding区域向外裁剪掉背景。（超出部分就被减掉） content：从content区域向外裁剪掉背景。（超出部分就被减掉）
上图效果：background-clip:content(其中在火狐浏览器不支持)
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background-clip</title>
<style>
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc;
-moz-background-clip:content;
-webkit-background-clip:content;
background-clip:content;}
</style>
</head>
<body>
<div class="back"></div>
</body>
</html>
(1). background-clip:padding，没有位移，边框20px、虚线、颜色#333，padding值为20px
效果：

修改css：
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc;
-moz-background-clip:padding;
-webkit-background-clip:padding;
background-clip:padding;}

(2). background-clip:border，没有位移，边框20px、虚线、颜色#333，padding值为20px
效果：

修改css：
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc;
-moz-background-clip:border;
-webkit-background-clip:border;
background-clip:border;}
背景颜色填充到border中。

然后我们在看看添加背景图片时效果是什么样的？
先上背景图片（img.jpg）

(3). background-clip:content，没有位移，边框20px、虚线、颜色#333，padding值为20px
效果：

修改css：
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc url(img.jpg) no-repeat;
-moz-background-clip:content;
-webkit-background-clip:content;
background-clip:content;}
这种效果仅仅在Safari和Chrome浏览器得到实现，超出content部分背景图片以及背景颜色就会被减掉

(4). background-clip:padding，没有位移，边框20px、虚线、颜色#333，padding值为20px
效果：

修改css：
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc url(img.jpg) no-repeat;
-moz-background-clip:padding;
-webkit-background-clip:padding;
background-clip:padding;}
只要超出padding部分，背景图片和颜色就会被减掉

(5). background-clip:border，没有位移，边框20px、虚线、颜色#333，padding值为20px

效果：

修改css：
.back{
width:120px;
height:100px;
border: 20px dashed ;
padding: 20px;
background: #ccc url(img.jpg) no-repeat;
-moz-background-clip:border;
-webkit-background-clip:border;
background-clip:border;}

只要超出border部分，背景图片和颜色就会被减掉

一般来说如果仅仅单独对background-clip进行设置使用的话，起到的作用不大，为了一些效果我们经常会将background-clip 和 background-origin 合起来一起使用。

kevinlifeng

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
css3.0 background-clip 背景的裁剪区域

background-clip：用来确定背景的裁剪区域。background-clip是css3.0中新增加的属性，一般喜欢将background-clip与background-origin和background-size一起应用。其中background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来确定背景的定位。
复制链接

扫一扫