css 既有背景图又有背景色，并且背景图在背景色之上

背景

画前端页面的时候，偶尔会遇到一个需求。在一个 div 中，既有背景颜色，又有背景图片，而且背景图要在背景色之上。

/* 这种分开写的方式，把颜色写在图片之前，背景颜色会被图片覆盖，不显示 */
background-color: #f5f5f5;
background: url('./images/banner11.png') no-repeat scroll left bottom/cover;

/* 把背景色写在背景图之后就可以实现需求 */
background: url('./images/banner11.png') no-repeat scroll left bottom/cover;
background-color: #f5f5f5;

/* 也可以采用这种简写的方式，依然有效*/
background: #f5f5f5 url('./images/banner11.png') no-repeat scroll left
  bottom/cover;

简写格式

background: [background-color] [background-image] [background-repeat]
  [background-attachment] [background-position] / [ background-size]
  [background-origin] [background-clip];

简写中的属性

• background-color 背景颜色: 合法的颜色值
• background-image 背景图像: url( )
• background-repeat 如何重复背景图像: no-repeat，repeat，repeat-x，repeat-y
• background-attachment 背景图像是否固定或者随着页面的其余部分滚动：fixed，scroll
• background-position 背景图像的位置：（left center right) (top center bottom)/x% y%/ xpx ypx
• background-size 背景图片的尺寸：cover(图片依靠长边缩放)，contain（图像依靠短边缩放）/x% y%/xpx ypx

不常用的 2 个属性：

• background-origin 背景图片的定位区域:border-box/padding-box/content-box
• background-clip 背景的绘制区域。border-box/padding-box/content-box

注意

如果简写形式中含有 background-size 属性，那么必须同时写上 background-position 属性，如果省略了就会导致样式失效。 总结就是：size 和 position 属性在简写的情况下，要么都写，要么都不写。都写的时候 size 前面需要加/