How to darken an image and mask it with text?

This is the reference of the result i want

CSS text mask for background image

I tried putting this in css

body {
  background: black;
}

p {
  color: #333;
  margin: 0;
  padding: 0;
  background: url('https://i.sstatic.net/TaaMS.jpg');
  text-align: justify;
  filter: grayscale(100%);
  background-position: center;
  background-attachment: fixed;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-background-fill-color: rgba(255, 255, 255, 255);
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit
  ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor.
  Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing
  elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada,
  posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit neque pulvinar
  ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet
  imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id
  lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt
  accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla
  facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna
  consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum
  tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas
  egestas, justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci,
  ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula
  porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus
  a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit
  neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum
  eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida.
  Cras id lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit neque pulvinar ligula,</p>

but it doesn't seem to work

this is my output

The image I am using

Solution

Add an extra background layer with blending and make sure the text color is transparent. You can then easily control the blend mode and the transparency of the extra layer:

body {
  background: black;
}

p {
  margin: 0;
  padding: 0;
  line-height:1em;
  font-size:14px;
  background: 
    linear-gradient(rgba(0,0,0,1),rgba(0,0,0,1)),
    url('https://i.sstatic.net/TaaMS.jpg') center/cover;
  text-align: justify;
  background-attachment: fixed;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-background-fill-color: transaprent;
  color:transparent;
  background-blend-mode:color;
}

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero .</p>

Or with filter but also keep the text transparent:

body {
  background: black;
}

p {
  margin: 0;
  padding: 0;
  line-height:1em;
  font-size:14px;
  background: 
    url('https://i.sstatic.net/TaaMS.jpg') center/cover;
  text-align: justify;
  background-attachment: fixed;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-background-fill-color: transaprent;
  color:transparent;
  filter:grayscale(100%);
}

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero .</p>