title: Creating a css background pattern of little squares and controlling the opacity
body: <p>How to replicate this image in css to serve as a background for text?</p>
  
  <p><img src="https://i.imgur.com/YB53trF.png" alt="image"></p>
  
  <p>(It's kind of hard to see but they're individual squares, not dots.)</p>
  
  <p>The squares should be transparent as well. </p>
  
  <p>Also it is possible to code it to control the opacity of each horizontal line of squares in css?</p>