资讯专栏INFORMATION COLUMN

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

zzbo / 2092人阅读

摘要:当然背景图片默认的渲染状态是从区域开始渲染的,我们在没有确认渲染的区域时,后期所做的裁剪工作实际上都是对照默认渲染区区域来进行裁剪的。

概念

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-originbackground-clip

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

    _ipo 评论0 收藏0
  • 准确裁剪背景图片准确渲染background-originbackground-clip

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

    cooxer 评论0 收藏0
  • [译]HTML&CSS Lesson7: 设置背景和渐变色

    摘要:属性值则依赖于我们需要创建什么样的渐变背景,例如线性渐变或放射性渐变。我们会在线性渐变中介绍不同种类的供应商前缀,但为了简便起见,放射性渐变中我们不会再提及。线性渐变多年来,设计师和开发者们都是通过切图来实现渐变背景。 背景对网站的设计有重大的影响。它有利于建立网站的整体感觉,设置分组,分配优先级,对网站的可用性也有相当大的影响。 在CSS中,元素的背景可以是一个纯色,一张图,一个渐变...

    bang590 评论0 收藏0
  • [译]HTML&CSS Lesson7: 设置背景和渐变色

    摘要:属性值则依赖于我们需要创建什么样的渐变背景,例如线性渐变或放射性渐变。我们会在线性渐变中介绍不同种类的供应商前缀,但为了简便起见,放射性渐变中我们不会再提及。线性渐变多年来,设计师和开发者们都是通过切图来实现渐变背景。 背景对网站的设计有重大的影响。它有利于建立网站的整体感觉,设置分组,分配优先级,对网站的可用性也有相当大的影响。 在CSS中,元素的背景可以是一个纯色,一张图,一个渐变...

    jk_v1 评论0 收藏0
  • [译]HTML&CSS Lesson7: 设置背景和渐变色

    摘要:属性值则依赖于我们需要创建什么样的渐变背景,例如线性渐变或放射性渐变。我们会在线性渐变中介绍不同种类的供应商前缀,但为了简便起见,放射性渐变中我们不会再提及。线性渐变多年来,设计师和开发者们都是通过切图来实现渐变背景。 背景对网站的设计有重大的影响。它有利于建立网站的整体感觉,设置分组,分配优先级,对网站的可用性也有相当大的影响。 在CSS中,元素的背景可以是一个纯色,一张图,一个渐变...

    Tonny 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<