马黑黑老师纯CSS背景设计思路：图片+渐变叠加+混合模式

醉美水芙蓉

有时候为了烘托氛围、突出中心，给背景图片做适当修饰是一个不错的思路。利用CSS的渐变+混合技术，可以简单实现这一设想。

考虑如下代码：

background:
  url('图片地址') no-repeat center/cover,
  linear-gradient(30deg, red, red 20%, transparent 25%),
  linear-gradient(30deg, transparent, transparent 80%, red 95%),
  linear-gradient(150deg, red, red 5%, transparent 20%),
  linear-gradient(150deg, transparent, transparent 75%, red 80%),
  #000
;
background-blend-mode: difference;

解释：

• url() 函数用于加载 background 的图片，其后以简写方式设置背景图片重复方式、定位与渲染形式，属于 背景图层（background-image）；

• linear-gradient() 函数给背景加载线性渐变，属于 背景图层（background-image），共四个：

  • 左下角
  • 右上角
  • 左上角
  • 右下角

• #000 背景色（background-color），防止图片失效时显示空白，也可以借之影响整体图层混合效果，当然也可以不设置。 不属于背景图层部分，是底色，所有图层均叠加在它上面；

• background-blend-mode 属性，定义背景图层混合模式，作用于对应的 background-image 背景图层（补全规则后续讨论）

渐变背景分别使用两个角度（30deg和150deg）以形成左右对称的修饰效果，渐变的色标位置两种颜色之间的比例有一个过渡区间以期平滑过渡。

这样写渐变背景逻辑清晰，但代码行数偏多，可以将同一角度的渐变进行合并：

linear-gradient(30deg, red, red 20%, transparent 25%, transparent 80%, red 95%, red 0),
    linear-gradient(150deg, red, red 5%, transparent 20%, transparent 75%, red 95%, red 0),

合并后渐变色标位置有所改变，主要是每一种角度渐变的后面部分。

背景融合模式仅取一个值即单值，意味所有图层使用相同的混合模式，最后的纯颜色即 background-color 是底色，不参与图层混合但颜色的设置会影响图层的混合渲染效果。可以为每一图层设置单独的混合模式，是否生效或是否达到预期效果取决于该图层与混合模式是否适宜以及底色设置与否、设置了什么颜色。多值背景融合的设置依据代码流从前到后的顺序作用于对应顺序的每一个背景图层，例如下例：

background:
  linear-gradient(orange, red),            /* 图层1 */
  linear-gradient(blue, pink),             /* 图层2 */
  url('图片地址1') no-repeat center/cover, /* 图层3 */
  url('图片地址2') no-repeat center/cover, /* 图层4 */
  green                                    /* background-color */
;
background-blend-mode:
  lighten, /* 作用于图层1 */
  hue,     /* 作用于图层2 */
  screen， /* 作用于图层3 */
  overlay  /* 作用于图层4 */
;

如果 background-blend-mode 只设置前两个值，则第三个图层值为 light、第四个图层值为 hue，按已定义的融合值顺序循环使用；值多于图层时，多出的值将被忽略。

关于简写属性 background 及其他

语法 ： background: 图层1, 图层2, ..., 图层N, 背景色;

说明 ：背景图片、渐变视为图层；背景色总是放在最后（但非简写时顺序不论）。

争议 ：有一种观点认为 background-color 也参与图层混合并可为之设置融合模式，值得商榷。个人认为它不具备图层属性，因此给它设置混合模式无效，但它的颜色设置，的的确确会影响整体融合效果，原因为它是底色，所有混合而成的融合效果均在其上展开。

💫 上述思路可以扩展、修改、完善，也可以使用全新的修饰思路，例如用 mask 遮罩替代背景叠加和背景混合。总而言之，CSS留给我们的创意空间十分广阔，善于想象并具备实现能力，神奇的特效总会在不经意间创造出来。

【实例】 大海啊故乡

fenjiangfan

支持佳作，期待后续更新