background-origin: 规定背景图片的定位区域。 1.padding-box:背景图像相对于内边距框来定位。 2.border-box:背景图像相对于边框盒来定位。 3.content-box:背景图像相对于内容框来定位。 background-clip: background-clip:规定背景的绘制区域。背景被裁剪到什么位置,和origin属性相似 1.padding-box:背景图像被裁剪...
属性值: border-box默认。背景被裁剪到边框盒。 padding-box 背景被裁剪到内边距框。 content-box 背景被裁剪到内容框。 background-origin W3C:属性相对于什么位置来定位。 属性值: padding-box 默认。背景图像相对于内边距框来定位。 border-box 背景图像相对于边框盒来定位。 content-box 背景图像相对于内容框...
取值:padding-box:从padding区域(不含padding)开始向外裁剪背景。 border-box:从border区域(不含border)开始向外裁剪背景。 content-box:从content 区域开始向外裁剪背景。 text:从前景内容的形状做为裁剪区域向外裁剪。 8.background-origin:指定对象的背景图像显示的原点。 取值:padding-box:从padding区域(不含padd...
border-box：盒子的边框为背景图片的起点（也就是背景图片的左上角以边框为起点）padding-box：盒子的填...
border-box背景图像边界框的相对位置 content-box背景图像的相对位置的内容框 举个栗子: background-image: url('smiley.gif'); background-repeat: no-repeat; background-position: left; background-origin: content-box; 等同于 : background: url ( 'smiley.gif' ) no-repeat left content-box; (缩写属...
border:10px solid red; background-image:url(1.jpg); background-repeat:no-repeat; background-origin:content-box; } 1. 2. 3. 4. 5. 6. 7. 8. 背景所在的区域 background-cilp: 制定背景绘制的区域,取值有四个: border-box默认值,背景放置在边框方框内(剪切成边框方框) ...
background-clip: border-box; background-origin: border-box; } 相信通过上面背景色和图片的例子,应该很容易可以看出background-clip的作用了,就不过多啰嗦了。 注:图片背景的例子和背景色的例子中有点不同,在.div9中,图片的例子多了一句background-origin:border,这是为什么呢?带着这个问题,在本文的下一...
border-box 背景色以边框为边界开始裁剪 padding-box 背景色以padding区域开始裁剪 content-box 背景色以内容区域开始裁剪(这点其实在我们工作中经常会被用到) 默认的属性的值为border-box。这里重点说一下content-box(至少我工作中用到了?),比如你设置了一个容器的内边距值,但是你只希望内容区域有背景色的时候,...
border-box 默认值,背景延伸到边框下,但是只有当边框的颜色是半透明的时候才能看到延伸过来的背景。 padding-box 边框下没有背景。 content-box 只有内容下有背景(padding的空间里都没有) 背景原点之 background-origin background-origin指定了背景图片定位的原点。属性取值与background-clip相同,但是clip是会对背景图...
background-clip属性规定背景的绘制区域。默认值为border-box,其属性值同background-origin一样,不过表现大不相同。其兼容性如下: 图片 background-clip: content-box 图片 background-clip: padding-box 图片 background-clip: border-box 背景大小 background-size ...