background overlay on image

   <div class="flex justify-start items-center flex-col h-screen ">
    <div class="relative w-full h-full bg-gray-700">
        <img src="https://images.pexels.com/photos/461077/pexels-photo-461077.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class=" w-full h-full object-cover ">
        
        <div class="absolute flex flex-col justify-center items-center top-0 right-0 left-0 bottom-0  " style="background:rgba(0, 0 ,0 ,0.7)">
            <div class="shadow-2xl">
              <button class="text-xl bg-white px-5 py-1 rounded shadow">Share</button>
            </div>
        </div>
    </div>
</div>

<!-- OR -->

<div class="flex justify-start items-center flex-col h-screen ">
    <div class="relative w-full h-full bg-gray-700">
        <img src="https://images.pexels.com/photos/461077/pexels-photo-461077.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class=" w-full h-full object-cover mix-blend-overlay">
        
        <div class="absolute flex flex-col justify-center items-center top-0 right-0 left-0 bottom-0  ">
            <div class="shadow-2xl">
              <button class="text-xl bg-white px-5 py-1 rounded shadow">Share</button>
            </div>
        </div>
    </div>
</div>