background-origin的默认值是padding-box, 代表的是背景图片开始的原点 background-origin:border-box; 图像从边框开始显示, 表示以表框左上角为原点展开背景图片 background-origin:padding-box; 图像从内边距开始显示(默认), 表示以内填充区左上角为原点展开背景图片 background-origin:content-box; 图像从内容开始...
该属性的默认值为 padding-box 。该属性不会被继承。注解对于呈现为单个方框的元素, background-origin 属性指定背景定位区域。对于呈现为多个方框(例如,多个线条上的嵌入式方框或多个页面上的方框)的元素,此属性指定决定背景定位区域的方框。如果此图像的 background-attachment 值为fixed ,则 background-origin 属性...
1、background-origin的兼容情况 2、background-origin的兼容写法 /*Gecko*/-moz-background-origin: padding-box || border-box || content-box;/*Webkit*/-webkit-background-origin: padding-box || border-box || content-box;/*Presto*/-o-background-origin: padding-box || border-box || content...
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-position 属性用来设置背景图像的起始位置,其默认值为top left,即元素的左上角。可是这个“左上角”是相对于元素的什么位置(border、padding、content)来定位的,却是由属性background-origin决定的,其默认值为padding-box。即默认情况下,背景图像从元素padding的左上角开始渲染。
第一个例子中的background-origin属性设置为:border-box。可以看到透明的红色边框下面的背景图像。 这个例子中的background-origin属性设置为:border-box。可以看到透明的红色边框下面的背景图像。 第二个例子中的background-origin属性设置为:padding-box。这是默认值。可以看到背景图像的原点(左上角位置)从paading box...
1.background-origin: padding-box(默认值) 从盒子的padding位置开始 .box{ margin: 20px auto; width: 300px; height: 300px; padding: 50px; border: 50px solid gold; background-color: red; background-image: url(./imgs/1.jpg); background-repeat: no-repeat; ...
background-origin的默认值是padding,也就是默认从 补白区域开始绘制背景。 但屌丝终有逆袭日,木耳再无回粉时,当变成黑木耳女神再来投怀送抱时,屌丝也完全可以说一声:不! 所 以当background-origin的值为border,而background-clip的值为padding时,虽然背景是从边框区域开始绘制 的,但因为设定了边框不显示背景,...
background-origin:border-box | padding-box | content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始写显示。 效果如下: 效果图 需要注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示。 (二).background-clip:用来将背景图片做适当的裁剪以适应实际需要。