logo标签列表

Tailwind CSS 不透明度

cssopacitytailwind-css
5
在我的应用程序中，我有一个模型。我正在对模型使用不透明度。现在我遇到的问题是，模型的正文部分不应该具有不透明度，我该如何解决这个问题？只有模型外部应该具有不透明度！ 

<!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>

7个回答
17

我知道已经快三年了，而且我不确定这是否适用于你的情况。但是我使用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>

如果有人需要类似的解决方案，我会发布这个帖子。

简短概述 - 在父级 div 中使用 bg-opacity-75，在子级 div 中使用 bg-opacity-100。不知道为什么使用 opacity-75 和 opacity-100 不能起作用。

4
1

当您将不透明度应用于容器时，其所有内容和子元素都将继承该不透明度。 您可以在Stackoverflow上看到这个问题： Allow opacity on container but not child elements

解决方案是将不透明度值应用于background-color。在Tailwind中，您可以使用bg-blue-{opacity}，例如bg-blue-100

1
你可以在嵌套的div中添加.opacity-100。
请查看透明度的官方Tailwind文档以获取更多详细信息。
谢谢，但这样所有的不透明度都会消失。只有模型主体上的不透明度应该消失。 - Jamie
你是否给 p 元素添加了类？ - Sahar
我有同样的问题。将opacity-100添加到嵌套的div中并没有改变任何东西。 - user2656732
0
将bg-opacity-40分配给外部div对我有帮助。
0
你需要尝试使用相对/绝对定位、透明度和层叠顺序来调整样式。
这里有一个jsfiddle的工作示例。 

new Vue({
  el: "#app",
  data: function () {
     return {
        modalOpen: false
     }
  }
})
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app" class="relative">
  <div class="h-screen w-full p-4">
    <span class="rounded p-2 bg-gray-200 cursor-pointer" @click="modalOpen = true;">
      Open Modal
    </span>
  </div>

  <div v-if="modalOpen" class="absolute bg-black opacity-25 inset-0 z-10" @click="modalOpen = false;"></div>

  <div class="absolute inset-0 flex justify-center items-center" v-if="modalOpen">
    <div class="bg-white p-8 z-20">
      Modal
    </div>
  </div>

</div>

0
截至tailwind 3.3版本，2021年最受赞同的答案（由@m01010011提供）对我无效，但是2022年的答案（由@florestan-korp提供）对我有效。
也就是说，bg-primary-blue/50有效，但bg-opacity-50无效。 我没有任何嵌套，只是一个普通的按钮。
<button className='g-primary-blue/50' disabled={props.isButtonDisabled}> Buttonname </button>

对于嵌套的div，这个答案可能仍然适用。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接