1、CSS背景
(1)、background-size 属性
background-size 属性规定背景图片的尺寸,同时适用与字体图标方面的适用(主要在移动端用到较多)。
在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。
您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。
(2)、background-origin 属性
background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域
(3)、background-clip 属性
background-clip看似跟background-origin的用法差不多,在W3C上面也没有找到对这两个属性的区别方面的解释。但是其中肯定是有不同之处,如果有两个属性的功能是完全一样的,明显是毫无意义的,通过谷歌了一下,主要总结如下:
两者重要的区别就是:背景能不能在边框上显示
background-clip:border|padding|content
该属性指定了背景在哪些区域可以显示,但与背景开始绘制的位置无关,背景的绘制的位置可以出现在不显示背景的区域,这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。(背景能在边框上显示)
background-origin:padding|border|content
该属性指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置,你可以用这个属性在边框上绘制背景,但边框上的背景显不显示出来那就要由background-clip来决定了,(背景并没有在边框上显示)