This css hack is useful when you’re using a hero image and displaying entry title over featured hero image on your blog post.
Either way, there are several ways of doing this. However, as stated in this discussion, only some hacks are more efficient than others.
For example, you could use Box Shadow property to achieve this effect; however, it might negatively affect your site’s performance on mobile devices.
Here’s a nice discussion on this over at Stack Overflow.
Apparently, the most efficient approach to use a semi-transparent color layer over your background image is as follows:
background-image: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.9)), url(enteryourimageurl.jpg)