background-clip 和 background-origin

wujl596 发布于2019-08-29 11:03 / 1092人阅读

摘要：下面都是我自己的理解如果有不对的地方还请大家帮忙指出下面是在浏览器上测试的和先说说默认的起始位置是外边缘的左上角如下图所示但是注意默认的结束位置却是外边缘的右下角如下图所示如果想让起始位置变为外边缘的左上角或者内容区域的左上角这时就

下面都是我自己的理解, 如果有不对的地方, 还请大家帮忙指出.
下面是在 chrome 浏览器上测试的

background-clip 和 background-origin 先说说background-image

background-image 默认的起始位置是 padding 外边缘的左上角. 如下图所示:

但是注意: 默认的结束位置却是 border 外边缘的右下角, 如下图所示:

如果想让起始位置变为 border 外边缘的左上角, 或者内容区域的左上角, 这时就是 background-origin 发挥作用的时候了.

background-origin

它的作用就是改变 background-image 左上角的起始位置.

它有三个值:

padding-box: 这是它的默认值, 指定 background-image 的左上角是 padding 外边缘的左上角.

border-box: 指定 background-image 的左上角是 border 外边缘的左上角.

content-box: 指定 background-image 的左上角是 内容区域 的左上角.

background-clip

它的作用是指定 background-color 和 background-image 的作用范围.

它也有三个值, 和 background-origin 一样的值.

border-box: 这是它的默认值, 表示超出 border 外边缘的部分将被裁掉. 如下图:

padding-box: 表示超出 padding 外边缘的部分将被裁掉. 如下图:

content-box: 表示超出内容区域范围的部分将被裁掉. 如下图:

云服务器专线服务 background-clip 智和网络智和网络 session和cookie的区别和联系万网和

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111395.html

要准确裁剪背景图片先要准确渲染，background-origin与background-clip

摘要：当然背景图片默认的渲染状态是从区域开始渲染的，我们在没有确认渲染的区域时，后期所做的裁剪工作实际上都是对照默认渲染区区域来进行裁剪的。概念 background-origin: 背景图片从盒子哪里开始渲染background-clip: 背景图片裁剪到盒子哪里取值 background-origin: 默认值：背景图片从padding区域开始渲染 boder-box: 背景图片从边...

zzbo 2019-08-01 17:30 评论0 收藏0
要准确裁剪背景图片先要准确渲染，background-origin与background-clip

摘要：当然背景图片默认的渲染状态是从区域开始渲染的，我们在没有确认渲染的区域时，后期所做的裁剪工作实际上都是对照默认渲染区区域来进行裁剪的。概念 background-origin: 背景图片从盒子哪里开始渲染background-clip: 背景图片裁剪到盒子哪里取值 background-origin: 默认值：背景图片从padding区域开始渲染 boder-box: 背景图片从边...

_ipo 2019-08-05 11:55 评论0 收藏0
要准确裁剪背景图片先要准确渲染，background-origin与background-clip

摘要：当然背景图片默认的渲染状态是从区域开始渲染的，我们在没有确认渲染的区域时，后期所做的裁剪工作实际上都是对照默认渲染区区域来进行裁剪的。概念 background-origin: 背景图片从盒子哪里开始渲染background-clip: 背景图片裁剪到盒子哪里取值 background-origin: 默认值：背景图片从padding区域开始渲染 boder-box: 背景图片从边...

cooxer 2019-08-29 13:15 评论0 收藏0
background-clip 和 background-origin

摘要：下面都是我自己的理解如果有不对的地方还请大家帮忙指出下面是在浏览器上测试的和先说说默认的起始位置是外边缘的左上角如下图所示但是注意默认的结束位置却是外边缘的右下角如下图所示如果想让起始位置变为外边缘的左上角或者内容区域的左上角这时就下面都是我自己的理解, 如果有不对的地方, 还请大家帮忙指出.下面是在 chrome 浏览器上测试的 background-clip 和 backgro...

Genng 2019-08-01 15:32 评论0 收藏0
回味background

摘要：就目前为止，还没有到好玩的地步，只要知道会盖在上面，然后如果在后面写半角英文逗号的话，就可以玩多背景图了，比如。 background是在CSS中使用率很高的一个属性之一，由最初的几个简单的属性到现在新增了很多的属性，比如background-size、background-origin以及background-clip等属性，还可以设置多背景来达到更多的炫酷效果。以下要谈的...

aboutU 2019-08-28 18:04 评论0 收藏0