<p>▼ background-image</p>
<div class="image monochrome">赤い文字を設定しています</div>
<p>▼ background-image@疑似要素</p>
<div class="image monochrome2">赤い文字を設定しています</div>
<p>▼ オリジナル</p>
<img src="https://gahag.net/img/201509/08s/gahag-0002507193-1.jpg" alt="" class="image original">

.image {
  width: 500px;
  font-size: 30px;
}

.monochrome {
  color: red;
  height: 333px;
  background-image: url(https://gahag.net/img/201509/08s/gahag-0002507193-1.jpg);
  background-size: cover;
  filter: grayscale(100%);
}

.monochrome2 {
  position: relative;
  width: 500px;
  height: 333px;
  color: red;
}

.monochrome2::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  content: "";
  background-image: url(https://gahag.net/img/201509/08s/gahag-0002507193-1.jpg);
  background-size: cover;
  display: block;
  filter: grayscale(100%);
}