background-origin: padding-box; /* 或 border-box、content-box */ /* 其他相关属性,如 background-position、background-repeat 等 */ } 1. 2. 3. 4. 5. 你可以将background-origin属性与background-position属性结合使用,以更精确地控制背景图片在元素中的位置和显示区域。 注意: 如果元素的background-...
https://code.juejin.cn/pen/7163843154465488937 注意,这里还用background-origin: border-box调整了背景起始位置; Step2 将border 和 padding 进行层次区分,利用background-clip属性。 对比设置 3 种 clip 效果: background-clip:border-box,border-box background-clip:padding-box,border-box background-clip:cont...
CSS3之背景定位原点background-origin的属性值有三个:border、padding和content。下面将围绕着三个属性值为大家介绍CSS3之背景定位原点background-origin。 一、background-origin的语法 1、background-origin的语法 background-origin: padding-box || border-box || content-box 2、background-origin的属性值 (1)p...
实例 内容框相对定位的背景图片: div { background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:left; background-origin:content-box; } 尝试一下 » 浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。属性 background-origin 4.0 9.0 4.0 3.0 10.5...
实例 内容框相对定位的背景图片: div { background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:left; background-origin:content-box; } 尝试一下 » 浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。属性 background-origin 4.0 9.0 4.0 3.0 10.5...
background-origin:设置 background-position 属性相对于什么位置来定位背景图像; background-clip:设置背景图像的显示区域; background:背景属性的缩写,可以在一个声明中设置所有的背景属性。 2. background-color 您可以使用 background-color 属性为元素设置一个背景颜色,该属性支持以下几种属性值: ...
background-origin属性规定background-position属性相对于什么位置来定位。 注释:如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。 假如background简写中没有设置该值,那么在background简写值后指定background-origin,那么后面的值就会覆盖简写值,其实说白了,就是后出现的值会覆盖前面的值。
加上background-clip:content-box;就可以了,什么意思呢?就是说从内容开始计算背景,那么就不会包括padding了。 那么background-origin什么意思呢? 不知道你们有没有发现一个现象,就是我们使用精灵图的时候默认图片会显示在左上角。 如果你想改变它的位置就可以使用background-oringin ...
background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border、padding、content 三种,而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。 比如,我们想要在边框上显示背景,我们可以使用background-origin帮我们实现(前提是边框要是透...
Background-Origin 在Background-Origin属性出现之前,当我们向元素添加背景图像时,图像位置从元素中填充的左上角开始。 打印默认背景原点位置的屏幕,如果background-position设置为左(left)0,上(top)0 ,您可以在填充区域(红点)处看到背景图像。 代码如下: ...