码迷,mamicode.com
首页 > 其他好文 > 详细

关于c3背景图background-origin和backgroud-clip属性的梳理

时间:2019-11-18 12:59:11      阅读:13      评论:0      收藏:0      [点我收藏+]

标签:属性   -o   add   tips   back   http   image   ack   就是   

background-origin属性规定背景图的定位区域,有三个值:

border-box:背景图从外边框的左上角开始,即包括边框部分;

技术图片

padding-box:背景图从内边距的左上角开始,即不包括上和左边框部分,图片足够大会包括右和下边框部分;

技术图片

content-box:背景图从内容框的左上角开始;

技术图片

background-clip:可以理解为图片裁剪后的显示区域,有四个值

border-box:从内边距的左上角开始裁剪背景图

技术图片

padding-box:将背景图位于边框内的部分裁剪掉

技术图片

content-box:将背景图位于内容框以为的部分裁剪掉;

技术图片

tips:这两个属性可配合使用和也可以和其他属性一起配合使用;简单来说origin属性是控制背景图的起始位置,clip是控制背景图的裁剪位置;如果只用clip属性裁剪位置也就是起始位置

关于c3背景图background-origin和backgroud-clip属性的梳理

标签:属性   -o   add   tips   back   http   image   ack   就是   

原文地址:https://www.cnblogs.com/ybhome/p/11881220.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!