在CSS中添加叠加背景

Question

我有以下png文件（参见第一张图片）。我需要在背景中添加蓝色叠加层，使其看起来像第二个图像。我怎么能用CSS做到这一点？

Answer 1

最好的支持跨浏览器的方法是实际制作两个图像，一个模糊，另一个不模糊，然后将它们叠加在一起。

body { 
  background: url(images/bg-solid.jpg) no-repeat;
}

#page-wrap { 
  background: url(images/bg-blurry.jpg) no-repeat fixed;
  width: 500px; margin: 40px auto;
}