background-origincontent-box background-clipborder-boxpadding-boxcontent-box ④、比较 对于这两个属性,其对应的keyword是相同的:border-box, padding-box, content-box。 它们的最根本的区别就是:background-clip 是对背景图片的裁剪,background-origin是对背景图片设置起始点。 对于background-clip, 其关键字是...
该属性的默认值为 padding-box 。该属性不会被继承。注解对于呈现为单个方框的元素, background-origin 属性指定背景定位区域。对于呈现为多个方框(例如,多个线条上的嵌入式方框或多个页面上的方框)的元素,此属性指定决定背景定位区域的方框。如果此图像的 background-attachment 值为fixed ,则 background-origin 属性...
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...
background-origin 属性规定背景图片的定位区域。 背景图片可以放置于 content-box、padding-box 或 border-box 区域。 实例 在content-box 中定位背景图片: .wrap{background:url(bg_flower.gif);background-repeat:no-repeat;background-size:100%100%;-webkit-background-origin:content-box;/* Safari */back...
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-origin属性设置为:border-box。可以看到透明的红色边框下面的背景图像。 这个例子中的background-origin属性设置为:border-box。可以看到透明的红色边框下面的背景图像。 第二个例子中的background-origin属性设置为:padding-box。这是默认...
background-origin有一点要十分的注意:如果背景不是no-repeat的话,这个属性是无效的。它会从border-box区域开始显示,这一点很重要。 background-clip定义了background的显示区域,三个属性 border-box 背景被裁剪到边框盒 padding-box 背景被裁剪到内边距框 ...
CSS3 background-origin 属性实例 内容框相对定位的背景图片: div { background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:left; background-origin:content-box; } 尝试一下 » 浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。属性 background-origin 4.0 ...
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; ...
backgroundOrigin 属性设置或返回 background-position 属性是相对于什么进行定位。注意:如果背景图像的 background-attachment 属性是 "fixed",则该属性不起作用。浏览器支持IE9+、Firefox、Opera、Chrome 和 Safari 支持 background-origin 属性。语法返回backgroundOrigin 属性:...