1.padding-box : 从padding区域开始向外裁剪背景。 2.border-box : 从border区域开始向外裁剪背景(默认值) 3.content-box : 从content 区域开始向外裁剪背景 4.text : 背景图只呈现在文字上 注意:若值为text , 那么background-clip要加上-webkit- 八、背景图片的位置区域 设置背景图的原点 background-origin...
background-clip的属性有content-box、padding-box、border-box, text, 默认为border-box,所以背景会侵入边框,改为padding-box,背景会裁剪到padding, 因而能解决背景侵入边框问题。 详细例子可在MDN上查看:https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip 多重边框问题 background叠加 background...
background-origin: border-box; 从边框区域开始显示背景,背景会延伸到外边界的边框,但边框在上,背景在下。 background-origin: padding-box; 从补白区域开始显示背景,背景延伸到最外边界的padding,边框不会有背景出现。 background-origin: content-box; 仅在内容区显示背景。 background-clip:指定背景的裁剪区域。
如果我将wrapper2的background-color: inherit;声明代码注释打开的话,那么在wrapper2和child中都会应用到wrapper1中所设置的背景颜色,这点和background-image道理相同。 background-origin 指定了背景图片原点相对于背景容器的位置,默认值为padding-box,表示和padding区域的原点对齐 border-box 背景图片会和容器的border原...
3、可以给一个元素同时设置background-color和background-image,当然只有image的某处是透明的时候,color才会显示出来,如下图所示。 4、背景颜色或背景图片默认是从padding区的左上开始显示,当然也可以不从这里开始显示,那就需要设置background-origin,它有三个取值content-box(从内容区左上角开始显示)、padding-box(默...
background-clip: content-box || padding-box || border-box 我们来看一下这几个取值的具体意思: content-box:盒子模型的背景从content部分的外边缘开始裁剪,使得除了content部分,其以外的背景都不会显示出来。 padding-box:盒子模型的背景从padding部分的外边缘开始裁剪,使得除了padding部分,其以外的背景都不会显示...
background-clip 定义了背景的绘制区间(图片或颜色), 是否延伸到边框下面。 background-origin: padding-box | border-box | content-box 默认值是padding-box background-origin 规定了背景图片(background-image)的原点位置的背景相对区域. 他们共同决定了background的绘图区域. ...
背景裁切之 background-clip background-clip是设定背景所覆盖的范围的属性。可选值有: border-box 默认值,背景延伸到边框下,但是只有当边框的颜色是半透明的时候才能看到延伸过来的背景。 padding-box 边框下没有背景。 content-box 只有内容下有背景(padding的空间里都没有) ...
background-image: url("images/google_glass.png"); background-size: contain; background-repeat: no-repeat; background-origin: content-box; background-position: right bottom; } .background-position:hover { background-origin: padding-box; background-position: calc(100% - 10px) calc(100% -...
(1)background-image:可添加多张背景图片。 参数:url() || none(默认) background-image: url(images/scroll_top.jpg), url(images/scroll_bottom.jpg), url(images/scroll_middle.jpg); 注意:背景图不占位置(不受padding的影响), img插入图片才占位且有4像素的距离,即背景图不能撑出高度。4像素的距离用...