background-origin属性在CSS中用于设置背景图片的定位区域,即决定背景图片从哪里开始定位。它有三个主要的属性值,分别表示背景图片相对于不同元素区域的定位起点: 属性值及意义: padding-box:背景图片相对于内边距框(padding box)来定位。这意味着背景图片从元素的padding开始,但不会绘制到border区域。这是background-o...
这9张图,很明显得告诉了我们background-origin的作用。它用来设置容器的背景图片从容器的哪里作为起始位置,至于显示不显示的问题,那就是background-clip的事了。 我们也可以控制背景图片不从0 0左上角开始显示,修改background-positon的位置即可。 如图:我们设置background-position:bottom right; 当设置background-pos...
background-origin的 作用就是指定background-position的参照点是在边框区域的左上角,还是在补白区域的左上角,或是在内容区域的左上角,对应的三个值就分 别是border、padding、content. background-position的也可以是left、right等方向词语,这时候就不能说参照点了,而应该说参照面,如果值为 background-origin的值...
顾名思义,所以background-origin是用来决定图片的原始起始位置,即你可以选择背景图片是从内容区域开始显示,还是内边距,还是边框。 View Code background-origin:margin background-origin:padding background-origin:content 我们看到,当background-origin的值为content-box时,首先会让背景图片的左上角和内容边缘左上角对...
background-origin属性用于指定背景图像background-image的原点(左上角)位置相对于元素的位置。 background-origin属性和其它CSS背景属性结合使用时会得到不同的效果,例如background-clip属性和background-repeat属性。 当设置background-attachment属性为fixed时,该属性将被忽略不起作用。
对于呈现为单个方框的元素, background-origin 属性指定背景定位区域。对于呈现为多个方框(例如,多个线条上的嵌入式方框或多个页面上的方框)的元素,此属性指定决定背景定位区域的方框。如果此图像的 background-attachment 值为fixed ,则 background-origin 属性不起作用。在本例中,背景定位区域是初始内容块。
注意:当使用background-attachment为fixed时,该属性将被忽略不起作用。 语法 background-origin属性被指定为下面列出的关键字值之一。 值 border-box背景是相对于边框的位置。padding-box背景是相对于填充框定位的。content-box背景是相对于内容框定位的。
新属性2: Background Origin 这个属性需要和background-position属性一起使用。你可以改变background-position 的计算方式(就像 background-clip一样). background-origin: border-box; background-position 从border开始计算。 background-origin: padding-box; ...
background-origin不同取值的效果图 background-clip 用于指定背景图像向外裁剪的区域, 默认值border-box, 另外还有两个值:padding-box和content-box。 注意: 由于 background-origin 的默认值为 padding-box, 即背景图像 background-image 的默认定位 background-position 参考的原点为 padding区域是[包含padding],...