title: How to get an overlay texture over inline image without extra mark-up using CSS?
body: <p>I need to give an overlay texture to 100+ images</p>
  
  <p>like this.</p>
  
  <p><img src="https://i.stack.imgur.com/yjwQP.jpg" alt="enter image description here"></p>
  
  <p>I have transparent <code>.PNG</code> texture file. if i use this as <code>background</code> then it will go behind the <code>&lt;img&gt;</code>. And I don't want to add another <code>&lt;img&gt;</code>  or any extra <code>span</code>, <code>div</code> for texture and <code>z-index</code>.</p>
  
  <p><strong>Is there any other way to achieve it in CSS?</strong></p>
  
  <p>I need to use specific texture <code>.png</code> so i cannot use <strong>CSS gradient</strong> only.</p>
  
  <p>I don't want to use main product image as <code>background</code>.</p>