CSSで背景画像に半透明カラーを重ねる

写真の上にテキストを重ねて読ませたい場合、写真がそのままだと読みにくいときがあります。
そこで画像の上に黒や白の半透明カラーを重ねることで、画像全体の色彩が統一され、テキストを読みやすくすることができます。

CSS例

  .intro {
  width: 100%;
  height: 100%;
  padding: 150px 0 100px;
  text-align: center;
  color: #fff;
  background: url(../img/town/bg.jpg) no-repeat bottom center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  }

  .intro&:before {
    z-index: 0;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:rgba(0,0,0,0.25);
  }

参考：背景画像のオーバーレイ加工を手っ取り早く実現する