1.padding-box:背景图像相对于内边距框来定位。 2.border-box:背景图像相对于边框盒来定位。 3.content-box:背景图像相对于内容框来定位。 background-clip: background-clip:规定背景的绘制区域。背景被裁剪到什么位置,和origin属性相似 1.padding-box:背景图像被裁剪到内边距内部。 2.border-box: 背景图像被裁...
background-origin W3C:属性相对于什么位置来定位。 属性值: padding-box 默认。背景图像相对于内边距框来定位。 border-box 背景图像相对于边框盒来定位。 content-box 背景图像相对于内容框来定位。 注:当background-attachment:fixed时,无效。(本人测试,是相对于body的padding-box定位的) background-size W3C:属...
取值:padding-box:从padding区域(不含padding)开始向外裁剪背景。 border-box:从border区域(不含border)开始向外裁剪背景。 content-box:从content 区域开始向外裁剪背景。 text:从前景内容的形状做为裁剪区域向外裁剪。 8.background-origin:指定对象的背景图像显示的原点。 取值:padding-box:从padding区域(不含padd...
与border类似,ie对新的background属性都是不支持的。多的就不说了,来看看,新的background 属性吧。 1、background-origin 控制背景图片区域 三个取值,由外向内分别为: border-box,padding-box,content-box 默认为padding-box 代码语言:javascript 复制 <!-- .bg-origin { width:250px; border:20px dotted ...
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-box：盒子的边框为背景图片的起点（也就是背景图片的左上角以边框为起点）padding-box：盒子的...
background-clip: border-box; background-origin: border-box; } 相信通过上面背景色和图片的例子,应该很容易可以看出background-clip的作用了,就不过多啰嗦了。 注:图片背景的例子和背景色的例子中有点不同,在.div9中,图片的例子多了一句background-origin:border,这是为什么呢?带着这个问题,在本文的下一...
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-origin: border-box; 从边框区域开始显示背景,背景会延伸到外边界的边框,但边框在上,背景在下。 background-origin: padding-box; 从补白区域开始显示背景,背景延伸到最外边界的padding,边框不会有背景出现。 background-origin: content-box; 仅在内容区显示背景。
border-box(默认) 填充至边框; padding-box 填充至内边距; content-box 填充之内容; text 作为字体前景色。 background-clip: border-box(默认) | padding-box | content-box | text background-size表示的是背景尺寸,其五个值如下,依次是 contain 将图像扩大至适应最短的边,剩余部分默认重复图像 ...