background-origin的默认值是padding-box, 代表的是背景图片开始的原点 background-origin:border-box; 图像从边框开始显示, 表示以表框左上角为原点展开背景图片 background-origin:padding-box; 图像从内边距开始显示(默认), 表示以内填充区左上角为原点展开背景图片 background-origin:content-box; 图像从内容开始...
border-box 该位置是相对于边框方框而言的。 content-box 该位置是相对于内容方框而言的。该属性的默认值为 padding-box 。该属性不会被继承。注解对于呈现为单个方框的元素, background-origin 属性指定背景定位区域。对于呈现为多个方框(例如,多个线条上的嵌入式方框或多个页面上的方框)的元素,此属性指定决定背景定...
background-origin:用于指定绘制背景图片的起点。默认值:padding-box。 background-clip:用于指定背景图片的显示范围。默认值:border-box。 它们的都有这三个属性值:border-box padding-box content-box 那么区别在哪里呢? 先来看一个简单的小例子: .box{width:199px;height:100px;background-color:rgba(0,0,0...
这个例子中的background-origin属性设置为:border-box。可以看到透明的红色边框下面的背景图像。 第二个例子中的background-origin属性设置为:padding-box。这是默认值。可以看到背景图像的原点(左上角位置)从paading box区域的左上角位置开始。 这个例子中的background-origin属性设置为:padding-box。可以看到背景图像...
background-clip和background-origin都为CSS3新增属性,且它俩的值都为border-box、padding-box和content-box,很容易混淆。 1.background-origin 我们都知道,background-position 属性用来设置背景图像的起始位置,其默认值为top left,即元素的左上角。可是这个“左上角”是相对于元素的什么位置(border、padding、conten...
background-origin 设置元素背景图片的原始起始位置。 语法: background-origin : border-box | padding-box | content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。 效果如下: 需要注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示。
padding-box:背景图片相对于内边距框(padding box)来定位。这意味着背景图片从元素的padding开始,但不会绘制到border区域。这是background-origin属性的默认值。 border-box:背景图片相对于边框盒(border box)来定位。这意味着背景图片从元素的border开始绘制,会延伸到border以内(包括padding和content区域)。
1--》 background-origin:可以定义背景图片的定位区域,它有3个属性值 background-origin:border-box /padding-box/ content-border; border-box==》背景图片以边框为基准定位 padding-box==》背景图片以padding为区域,或者说以边框内侧为区域定义 content-border==》背景图片以内容区域进行定位 ...
background-Origin属性指定background-position属性应该是相对位置。注意如果背景图像background-attachment是"固定",这个属性没有任何效果。默认值: padding-box 继承: no 版本: CSS3 JavaScript 语法: object object.style.backgroundOrigin="content-box"语法background-origin: padding-box|border-box|content-box;...
1)background-origin针对background-image,规定background-image进行绘制图片的时候的左边原点是哪里: border-box(边框的外边缘) padding-box(paddng的外边缘 , 这是默认值) content-box(内容的 外边缘) 2)background-clip针对背景(背景色+背景图)(已经绘制出来的图形、图片)进行裁剪,显示一部分 ...