我正在使用 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 调暗。只有两个图像标签保持完全可见。

我的设置有问题吗？