background-origin的默认值是padding-box, 代表的是背景图片开始的原点 background-origin:border-box; 图像从边框开始显示, 表示以表框左上角为原点展开背景图片 background-origin:padding-box; 图像从内边距开始显示(默认), 表示以内填充区左上角为原点展开背景图片 background-origin:content-box; 图像从内容开始...
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...
该属性的默认值为 padding-box 。该属性不会被继承。注解对于呈现为单个方框的元素, background-origin 属性指定背景定位区域。对于呈现为多个方框(例如,多个线条上的嵌入式方框或多个页面上的方框)的元素,此属性指定决定背景定位区域的方框。如果此图像的 background-attachment 值为fixed ,则 background-origin 属性...
我们都知道,background-position 属性用来设置背景图像的起始位置,其默认值为top left,即元素的左上角。可是这个“左上角”是相对于元素的什么位置(border、padding、content)来定位的,却是由属性background-origin决定的,其默认值为padding-box。即默认情况下,背景图像从元素padding的左上角开始渲染。 background-orig...
第一个例子中的background-origin属性设置为:border-box。可以看到透明的红色边框下面的背景图像。 这个例子中的background-origin属性设置为:border-box。可以看到透明的红色边框下面的背景图像。 第二个例子中的background-origin属性设置为:padding-box。这是默认值。可以看到背景图像的原点(左上角位置)从paading box...
background-origin的默认值是padding,也就是默认从 补白区域开始绘制背景。 但屌丝终有逆袭日,木耳再无回粉时,当变成黑木耳女神再来投怀送抱时,屌丝也完全可以说一声:不! 所 以当background-origin的值为border,而background-clip的值为padding时,虽然背景是从边框区域开始绘制 的,但因为设定了边框不显示背景,...
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:设置元素背景图片的原始起始位置 语法: background-origin:border-box | padding-box | content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始写显示。 效果如下: 效果图 需要注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示。
background-origin background-clip 一、背景渐变色(取值单位-图像) linear-gradient() ==》路径渐变 radial-gradient() ==》经向渐变 repeating-linear-gradient()==》 重复路径渐变 repeating-radial-gradient()==》 重复径向渐变 1.1这四个颜色渐变函数的兼容性都一样,先来看路径渐变linear-gradient()的几个个...