Tailwind CSS 不透明度

问题描述 投票：0回答：7

在我的应用程序中，我有一个模型。我在模型上使用不透明度。 我现在遇到的问题是模型的主体 不应该有不透明度我该如何解决这个问题？仅在模型之外 应该有不透明度！

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

css opacity tailwind-css
7个回答
16
投票

我知道已经快三年了，我不确定这是否是您所想要的情况。但使用 

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>

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

TL;DR - 在父级 

bg-opacity-75
中使用 
div
，在子级 
bg-opacity-100
中使用 
div
。由于某种原因，使用 
opacity-75
和 
opacity-100
不起作用。

4
投票

使用 Tailwind 检查背景颜色的“更改不透明度”： https://tailwindcss.com/docs/background-color#change-the-opacity

例如，在此示例中，“bg-sky-500”的不透明度为 50：

<button class="bg-sky-500/50 ..."></button>
1
投票

您可以将 

.opacity-100
添加到嵌套 div。

查看关于 Opacity 的官方 Tailwind 文档以了解更多详细信息。

1
投票

当您对容器应用不透明度时，其所有内容和子级都将继承 不透明度。 你可以在 Stackoverflow 上看到这个问题： 允许容器不透明，但不允许子元素

解决方案是将不透明度值应用于

background-color
。顺风而行的你 可以用 
bg-blue-{opacity}
来完成，就像 
bg-blue-100

0
投票

您需要使用相对/绝对、不透明度和z-索引

这是一个 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
投票

将 

bg-opacity-40
分配给外部 div 为我解决了这个问题

0
投票

截至tailwind 3.3，获得最多支持的答案即@m01010011 不适合我，但@florestan-korp 的答案对我有用。

即 

bg-primary-blue/50
正在工作，但 
bg-opacity-50
不工作。 我没有任何嵌套，只是一个普通的旧按钮：

<button className='g-primary-blue/50' disabled={props.isButtonDisabled}> Buttonname </button>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.