background-origin属性在CSS中用于设置背景图片的定位区域,即决定背景图片从哪里开始定位。它有三个主要的属性值,分别表示背景图片相对于不同元素区域的定位起点: 属性值及意义: padding-box:背景图片相对于内边距框(padding box)来定位。这意味着背景图片从元素的padding开始,但不会绘制到border区域。这是background-o...
总结,background-origin属性定义了背景图像的相对定位位置,这个位置可以用background-position来改变,而且元素背景图像的区域不会因此被限定住,只对元素背景图像起作用。如果元素使用background-attachment属性时,该属性会失效。
1--》 background-origin:可以定义背景图片的定位区域,它有3个属性值 background-origin:border-box /padding-box/ content-border; border-box==》背景图片以边框为基准定位 padding-box==》背景图片以padding为区域,或者说以边框内侧为区域定义 content-border==》背景图片以内容区域进行定位 2==> 可以定义背景...
其实background-origin主要就是用来决定背景图片的定位原点,换句话说就是背景图片定位的起点(background-position的原点)如果你看过了《CSS3 background-clip》一文,你不难发现,元素Background中的background-color原点位置是在Border的外边缘处,而background-image的原点是在元素的padding外边缘处(也...
background-clip和background-origin是 CSS 中两个与背景相关的属性,它们都可以用来控制背景图像或颜色的显示范围,但它们的作用略有不同。 background-clip:此属性定义背景的绘制区域。它有三个可能的值: border-box:背景被裁剪到边框盒(默认值)。 padding-box:背景被裁剪到内边距盒。
background-origin属性可以使用在所有元素上。 在线演示 第一个例子中的background-origin属性设置为:border-box。可以看到透明的红色边框下面的背景图像。 这个例子中的background-origin属性设置为:border-box。可以看到透明的红色边框下面的背景图像。 第二个例子中的background-origin属性设置为:padding-box。这是默认...
CSS3background-origin属性 作用:规定背景图片的定位区域。 说明:设置或检索对象的背景图像计算<'background-position'>时的参考原点(位置)。 语法: background-origin:padding-box|border-box|content-box; padding-box:背景图像相对于内边距框来定位。
background-origin属性是控制背景图片显示的原点位置,根据设置的参数值来判断位置(1)border-box(2)content-box(3)padding-box下面利用一个实例说明background-origin的用法,操作如下:工具/原料 CSS3 HTML5 HBuilder 截图工具 浏览器 方法/步骤 1 第一步,在HBuilder创建的web目录下,新建页面backgroundOrigin...
background-origin属性是用于设置背景图片的定位区域,它有三个值分别表示相对于内边距框定位、相对于边框盒定位、相对于内容框定位。 CSS3 background-origin属性 作用:规定背景图片的定位区域。 说明:设置或检索对象的背景图像计算 <' background-position '> 时的参考原点(位置)。