摘要：当然背景图片默认的渲染状态是从区域开始渲染的，我们在没有确认渲染的区域时，后期所做的裁剪工作实际上都是对照默认渲染区区域来进行裁剪的。
概念
background-origin: 背景图片从盒子哪里开始渲染
background-clip: 背景图片裁剪到盒子哪里
background-origin:
默认值：背景图片从padding区域开始渲染
boder-box: 背景图片从边框里面开始
padding-box:背景图片从padding区域开始渲染
content-box: 背景图片从内容区域开始渲染
background-clip:
起步默认值： 背景图片裁剪到padding区域最外层边缘线
boder-box: 背景图片裁剪到边框最外层边缘线
padding-box: 背景图片裁剪到padding区域最外层边缘线
content-box: 背景图片裁剪到内容区域最外层边缘线
我们在使用背景图片时，肯定首先是要确认我们的背景图片要从哪里开始渲染，
确定了渲染的状态， 我们才能准确的对背景图片进行裁剪。当然背景图片默认的渲染状态是从padding区域开始渲染的，我们在没有确认渲染的区域时，后期所做的裁剪工作实际上都是对照默认渲染区padding区域来进行裁剪的。
background-origin:
代码：
图片：
background-clip:
代码：
图片：
以上就是对background-origin和background-clip的解述，我们在裁剪背景图片做某些效果时就一定得准确的先渲染。如果以上那些地方理解有误还请指点，笔者会虚心学习。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/51186.html
摘要：当然背景图片默认的渲染状态是从区域开始渲染的，我们在没有确认渲染的区域时，后期所做的裁剪工作实际上都是对照默认渲染区区域来进行裁剪的。 概念 background-origin: 背景图片从盒子哪里开始渲染background-clip: 背景图片裁剪到盒子哪里 取值 background-origin: 默认值：背景图片从padding区域开始渲染 boder-box: 背景图片从边...
摘要：属性值则依赖于我们需要创建什么样的渐变背景，例如线性渐变或放射性渐变。我们会在线性渐变中介绍不同种类的供应商前缀，但为了简便起见，放射性渐变中我们不会再提及。线性渐变多年来，设计师和开发者们都是通过切图来实现渐变背景。 背景对网站的设计有重大的影响。它有利于建立网站的整体感觉，设置分组，分配优先级，对网站的可用性也有相当大的影响。 在CSS中，元素的背景可以是一个纯色，一张图，一个渐变...
摘要：属性值则依赖于我们需要创建什么样的渐变背景，例如线性渐变或放射性渐变。我们会在线性渐变中介绍不同种类的供应商前缀，但为了简便起见，放射性渐变中我们不会再提及。线性渐变多年来，设计师和开发者们都是通过切图来实现渐变背景。 背景对网站的设计有重大的影响。它有利于建立网站的整体感觉，设置分组，分配优先级，对网站的可用性也有相当大的影响。 在CSS中，元素的背景可以是一个纯色，一张图，一个渐变...
摘要：属性值则依赖于我们需要创建什么样的渐变背景，例如线性渐变或放射性渐变。我们会在线性渐变中介绍不同种类的供应商前缀，但为了简便起见，放射性渐变中我们不会再提及。线性渐变多年来，设计师和开发者们都是通过切图来实现渐变背景。 背景对网站的设计有重大的影响。它有利于建立网站的整体感觉，设置分组，分配优先级，对网站的可用性也有相当大的影响。 在CSS中，元素的背景可以是一个纯色，一张图，一个渐变...
阅读 1844·2021-11-22 09:34
阅读 2977·2021-09-28 09:35
阅读 13244·2021-09-09 11:34
阅读 3556·2019-08-29 16:25
阅读 2771·2019-08-29 15:23
阅读 2009·2019-08-28 17:55
阅读 2406·2019-08-26 17:04
阅读 3026·2019-08-26 12:21
