CSS3新增: background-origin:指定背景的显示区域。默认情况下,总是以元素左上角为坐标原点进行背景图像定位。 值:border-box | padding-box | content-box background-origin: border-box; 从边框区域开始显示背景,背景会延伸到外边界的边框,但边框在上,背景在下。 background-origin: padding-box; 从补白区域...
1.padding-box : 从padding区域开始向外裁剪背景。 2.border-box : 从border区域开始向外裁剪背景(默认值) 3.content-box : 从content 区域开始向外裁剪背景 4.text : 背景图只呈现在文字上 注意:若值为text , 那么background-clip要加上-webkit- 八、背景图片的位置区域 设置背景图的原点 background-origin...
(2)background-origin:padding; 从padding位置算起 (3)background-origin:content; 从content-box内容区域位置算起; background-clip和background-origin的不同之处www.CSS3.info网站给做了很好的分析讲解。 4、新属性:Background Size Background Size属性用来重设你的背景图片。有几个属性值: (1)background-siz...
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; 二, 接下来再总结一下background背景图片与padding之间的关系: 当div的大小与图片大小一致的时候:设置div--padding 10px; .wrap{ width:580px; height:463px; background:url(images/3.jpg) no-repeat #5fb878 center; padding:10px...
padding-box:从padding区域(含padding)开始显示背景图像; border-box:从border区域(含border)开始显示背景图像 content-box:从content区域开始显示背景图像; 8. background-clip设置对象的背景图像向外裁剪的区域 padding-box:从padding区域(不含padding)开始向外裁剪背景 ...
这里主要用于两个属性:margin和padding,我们以margin为例,padding与之相同。盒子有上下左右四个方向,每个方向都有个外边距: 1 2 3 4 margin-top:1px;margin-right:1px;margin-botton:1px;margin-left:1px; 这四个值可以缩写到一起: 1 margin:1px1px1px1px; ...
css详解background八大属性及其含义 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距(margin)、元素边框(border)、元素内边距(padding)和元素内容(content) 4部分组成,不过这只是从2D的视角来看盒模型的组成,而今天笔者将阐述如何从3D的视角看待盒模型的组成。
1、如果不设置背景,那么背景就是透明的。 2、很多人以为只有内容区有背景色,其实padding区、border区都可以有背景色。有一个专门的参数专门来控制——“background-clip”,它有三个取值content-box(仅内容区有…
padding-box 背景色以padding区域开始裁剪 content-box 背景色以内容区域开始裁剪(这点其实在我们工作中经常会被用到) 默认的属性的值为border-box。这里重点说一下content-box(至少我工作中用到了?),比如你设置了一个容器的内边距值,但是你只希望内容区域有背景色的时候,就可以使用这个属性,而没有必要将padding改...
1、background-origin 控制背景图片区域 三个取值,由外向内分别为: border-box,padding-box,content-box 默认为padding-box 代码语言:javascript 复制 <!-- .bg-origin { width:250px; border:20px dotted #000; padding:20px; position:relative; text-align:center; font-weight:bold; color:#f00; ...