background-origin: padding-box; /* 或 border-box、content-box */ /* 其他相关属性,如 background-position、background-repeat 等 */ } 1. 2. 3. 4. 5. 你可以将background-origin属性与background-position属性结合使用,以更精确地控制背景图片在元素中的位置和显示区域。 注意: 如果元素的background-...
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...
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...
background-origin 是 CSS3 中新增的属性。在使用 background-position 属性来设置背景图像的位置时,默认是以元素左上角的位置来计算的。您还可以使用 background-origin 属性来设置 background-position 属性相对哪个位置来定位背景图像,background-origin 属性的可选值如下: 【示例】使用 background-origin 属性设置...
CSS3 background-origin 属性实例 内容框相对定位的背景图片: div { background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:left; background-origin:content-box; } 尝试一下 » 浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。属性 background-origin 4.0 ...
CSS3 background-origin 属性实例 内容框相对定位的背景图片: div { background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:left; background-origin:content-box; } 尝试一下 » 浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。属性 background-origin 4.0 ...
那么background-origin什么意思呢? 不知道你们有没有发现一个现象,就是我们使用精灵图的时候默认图片会显示在左上角。 如果你想改变它的位置就可以使用background-oringin 如果想从中间开始,那就设置成background-oringin:content-box; 当然还有其他的一些属性,你们可以去网上查一下。发布于 2020-11-05 17:46 ...
background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border、padding、content 三种,而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。 比如,我们想要在边框上显示背景,我们可以使用background-origin帮我们实现(前提是边框要是透...
background-clip和background-origin是 CSS 中两个与背景相关的属性,它们都可以用来控制背景图像或颜色的显示范围,但它们的作用略有不同。 background-clip:此属性定义背景的绘制区域。它有三个可能的值: border-box:背景被裁剪到边框盒(默认值)。 padding-box:背景被裁剪到内边距盒。
Background-Origin 在Background-Origin属性出现之前,当我们向元素添加背景图像时,图像位置从元素中填充的左上角开始。 打印默认背景原点位置的屏幕,如果background-position设置为左(left)0,上(top)0 ,您可以在填充区域(红点)处看到背景图像。 代码如下: ...