background-size: 宽 高 | cover 完全覆盖 | contain 宽高自动调节

如果你还了解 CSS background 属性，可以去先 MDN 查看相关的知识。background-clip, background-color, background-image, background-origin, background-po

上面代码表示整个图片的上部分20%和下部分20%是对应的纯色，只有中间的部分是渐变色。如果让中间的部分逐渐缩小，当中间部分变为0即上下两种颜色的七点和终点相同是，就没有了渐变而变成了两种颜色的色条:. 注意还需颠倒background-size长宽的设定。

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。编译之后引用css文件 我推荐使用Koala.exe 下载地址 多语言支持 支持Less、Sass、CoffeeScript 和

背景图片的宽*高：400*200，要设置放背景的容器的宽高是图片宽高的等比例自适应填充才不变形。background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变。

简述在页面的构建过程中，离不开背景、边框，背景和边框就是最基本的设置了UI为了实现一些特定的视觉效果，单一的纯色背景已经不能满足现有的效果了。越来越多的图片背景开始盛行。当下css3已经普及，虽然并不能很好的向下兼容，却可以做好回退。在这里，我们使用纯cs

不同之处在于：1.在no-repeat情况下，如果容器宽高比与图片宽高比不同，　　image：默认值。

以往通过图片修饰页面的途径，在css3中得到了改善，对页面性能也有了一定的提升。设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。设置元素背景

空间是 100px100px，图片是 6060空间是空间是 100px100px，图片是 160px240px空间是空间是 100px100px，图片是 240px160px就图片展示而言，按宽高比进行缩放是最好的结果，宽高1：1的话，放到正方形空间内很好

在一个项目的开发过程中用到了css Sprite，有这样一个需求：目标样式大小是32px * 23px大小的图片作为图标。在我们的实例中,我们使用底部菜单大小32px * 23px.为了保证普通显屏设备的图像显示，在这个图像的基础上做了一半的缩小。我们高分

在此页底部有更多的例子。表格中的数字表示支持该属性的第一个浏览器版本号。属性background-size 4.01.0 -webkit-9.04.03.6 -moz-4.13.0 -webkit-10.510.0 -o-. 值描述length设置背景图片

在默认的水平文档流方向下，CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的，这个和top, bottom等属性的百分比值不一样。这么设计的原因在我的新书中会有说明，这里不展开。对于padding属性而言，任意方向的百分比pa

由于业务的需要，我们竟然还要支持IE8，听着就让人很心酸呀。不过在进行适配的过程中，会发现还是有一定规律的，基本上帮相关问题改了，页面也就能正常显示了。这个是IE的一个BUG，正常来说，不解决也不会有什么问题，但是如果一定要精益求精的话的话，可以用Java