背景混合时bg-opacity无法改变背景颜色透明度问题

我希望主div能与body中设置的bg-[url('/bg.webp')]背景图混合，已添加bg-blend-normal类，但无论修改bg-opacity-X中的X值，div背景颜色的透明度都没有变化。补充说明：此处的“混合”是指让主div继承body背景图的颜色，再调整该颜色的透明度。

相关代码：

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>humhum</title>
    </head>
    <body
        class="min-h-screen bg-base-200 bg-[url('/bg.webp')] bg-cover bg-center bg-fixed"
    >
        <div
            class="mx-auto px-4 bg-blend-normal backdrop-blur-sm text-white text-opacity-80 shadow-inner border border-white border-opacity-10 bg-scanlines max-w-2xl text-center min-h-screen bg-opacity-60"
        >
            <div>oh hey.</div>
        </div>
    </body>
</html>

问题根源 #

bg-blend-normal是用于元素自身的背景图和背景色之间的混合，不是让元素背景和父元素（body）的背景混合；而bg-opacity-X只作用于元素自身设置的背景色/背景图，你的需求是透过div看到body背景并叠加透明度，所以这两个属性的用法不符合预期。

修正步骤 #

• 移除div上的bg-blend-normal和bg-scanlines类（这两个是针对元素自身背景的混合，不符合需求）
• 用Tailwind的带透明度的背景色语法（颜色/透明度）替代bg-opacity-X，比如bg-base-200/60，这样div的背景色会带着透明度，与下方body的背景图自然混合
• 保留backdrop-blur-sm以维持模糊效果

修正后代码 #

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>humhum</title>
        <!-- 确保已引入Tailwind CSS -->
    </head>
    <body
        class="min-h-screen bg-base-200 bg-[url('/bg.webp')] bg-cover bg-center bg-fixed"
    >
        <div
            class="mx-auto px-4 backdrop-blur-sm text-white text-opacity-80 shadow-inner border border-white border-opacity-10 max-w-2xl text-center min-h-screen bg-base-200/60"
        >
            <div>oh hey.</div>
        </div>
    </body>
</html>

效果说明 #

调整bg-base-200/XX中的XX值（比如/40、/70）就能直接改变div背景的透明度，同时因为背景色带透明，会自然透出下方body的背景图，实现你要的“继承背景图颜色并调整透明度”的效果。

内容的提问来源于stack exchange，提问作者canersevdiceginibekleyenoglu