我正在使用Tailwind CSS来设计一个Next.js网站。我有一个图像元素，我正在使用Next.js图像元素。
现在我想在当前页面的顶部打开一个模态。但我不想完全黑掉底层页面，只是调暗它。为此，我使用了一个绝对定位元素，在其他所有元素的顶部有50%的不透明度。在我当前的设置下，绝对定位元素下面的所有元素都变暗了，除了图像元素，它们看起来不受任何影响。
jsx看起来像这样：

<div>
  <div className='absolute inset-0 flex items-center justify-center bg-black'>
    <h1 className='bg-gray-600'>MODAL</h1>
  </div>
  <div className='px-auto mx-32 grid grid-cols-2 gap-3'>
    <h1 className='col-span-2 my-5 text-3xl font-black'>
      Header
    </h1>
    <div id='CardElem'>
      <div id='memberCard' className='p-3 shadow-2xl'>
        <Image alt='avatar' width=250 height=250 src='imgSrc' />
        <h1 className='text-2xl font-black'>text1</h1>
        <h2 className='text-xl font-bold'>text2</h2>
        <h3 className='text-lg'>text3</h3>
      </div>
    </div>
    <div id='CardElem'>
      <div id='memberCard' className='p-3 shadow-2xl'>
        <Image alt='avatar' width=250 height=250 src='imgSrc' />
        <h1 className='text-2xl font-black'>text4</h1>
        <h2 className='text-xl font-bold'>text5</h2>
        <h3 className='text-lg'>text6</h3>
      </div>
    </div>
  </div>
</div>

使用此设置，每个h1、h2、h3都将被绝对div变暗。只有两个Image标签保持完全可见。
我的设置有什么问题吗？