css3 background-clip background-origin属性详解

最新推荐文章于 2024-07-11 13:56:02 发布

世态炎凉！！

最新推荐文章于 2024-07-11 13:56:02 发布

阅读量1.5k

点赞数 1

分类专栏： css 文章标签： css3 html5 javascript

本文链接：https://blog.csdn.net/ws9029/article/details/99095621

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

好久没写样式，前2天有个新来的同事问我background-clip这个css3 的属性，我当时只记这个是裁剪，具体怎么裁剪已经忘记了，找了下资料整理下方便以后记忆,它有三个属性：

1.border-box

一.background-clip

这个看上去有点像box-sizing的属性，其实不是，border-box是默认值，大概意思是背景延伸到border的外边缘。看下面代码

    <style>
    .test{
        width: 300px;
        height: 300px;
        border: 10px dotted #aaa;
        background-color: yellow;
        margin:100px auto;
        padding: 20px;
        background-clip:border-box;    
    }  
    </style>
</head>
<body>
    <div class="test">
    </div>
</body>

效果如下（背景延伸到border的外边缘）：
在这里插入图片描述

二.background-origin


<style>
    .test {
        width: 300px;
        height: 300px;
        padding: 20px;
        border: 10px dotted #aaa;
        margin: 100px auto;
        background-repeat:no-repeat;
        background-image: url('1.png');
        background-origin: padding-box;
        background-size: cover;
    }
</style>
</head>

<body>
    <div class="test">
    </div>
</body>

背景图是以border为起点
在这里插入图片描述
效果是一样的，都是在border外边缘显示

2.content-box

一.background-clip

box-sizing也有这个属性，背景剪切到内容区域，上面代码内容区域是300X300,所以300之外的区域都被剪切了。
效果如下：
在这里插入图片描述

二.background-origin

<style>
    .test {
        width: 300px;
        height: 300px;
        padding: 20px;
        border: 10px dotted #aaa;
        margin: 100px auto;
        background-repeat:no-repeat;
        background-image: url('1.png');
        background-origin: padding-box;
        background-size: cover;
    }
</style>
</head>

<body>
    <div class="test">
    </div>
</body>

背景是以content内容为起点
在这里插入图片描述

3.padding-box

一.background-clip

顾名思义就是在还包括padding区域，不包括border,所以是content-box+padding。
效果如下：
在这里插入图片描述

二.background-origin

背景图以padding为起点，不包括border

<style>
    .test {
        width: 300px;
        height: 300px;
        padding: 20px;
        border: 10px dotted #aaa;
        margin: 100px auto;
        background-repeat:no-repeat;
        background-image: url('1.png');
        background-origin: padding-box;
        background-size: cover;
    }
</style>
</head>

<body>
    <div class="test">
    </div>
</body>

</body>

在这里插入图片描述

这个两个属性是css3的属性，浏览器兼容范围 chrome15+、IE9+、Edge12+、Firefox4+、Opera11.5+、Safari7+。

世态炎凉！！

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css3 background-clip background-origin属性详解

好久没写样式，前2天有个新来的同事问我background-clip这个css3 的属性，我当时只记这个是裁剪，具体怎么裁剪已经忘记了，找了下资料整理下方便以后记忆,它有三个属性：1.border-box这个看上去有点像box-sizing的属性，其实不是，border-box是默认值，大概意思是背景延伸到border的外边缘。看下面代码 <style> .test...
复制链接

扫一扫

专栏目录