Tailwind CSS 不透明度

Jam*_*mie 5 css opacity tailwind-css

在我的应用程序中,我有一个模型。我在模型上使用不透明度。我现在遇到的问题是模型的主体不应该具有不透明度,我该如何解决这个问题?只有模型外部才应该具有不透明度!

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="flex flex-col bg-red min-h-screen">
    <div class="fixed w-full h-full bg-blue opacity-50 flex items-center justify-center flex-col">
    <div class="bg-black p-16">
      <p class="text-white">Model body</p>
    </div>  
  </div>
  </div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

m01*_*011 19

我知道已经快三年了,我不确定这是否是你所想要的。但使用bg-opacity-{n}而不是opacity-{n}对我有用。

我想显示一个带有黑色背景的覆盖元素,但覆盖元素本身应该具有 100% 的不透明度。

示例代码:

<div className="p-20 border-4 border-black fixed top-0 left-0 bottom-0 right-0 w-full h-screen bg-black bg-opacity-75">
    <div className="bg-white bg-opacity-100">
        Sample Text
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

发布此内容以防其他人需要这样的解决方案。

TL;DRbg-opacity-75 -在父母div和bg-opacity-100孩子中使用div。使用opacity-75andopacity-100由于某种原因不起作用。


小智 1

您可以添加.opacity-100到嵌套的 div 中。

查看有关不透明度的官方 Tailwind 文档以了解更多详细信息。