顺风 css 不透明度

Posted 2023-03-07

技术标签:

【中文标题】顺风 css 不透明度【英文标题】：Tailwind css opacity 【发布时间】：2019-02-20 03:04:54 【问题描述】：

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

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

【问题讨论】：

【参考方案1】：

我知道这已经***年了，我不确定这是否是你想要的。但是使用 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 - 在父 div 中使用 bg-opacity-75，在子 div 中使用 bg-opacity-100。由于某种原因，使用 opacity-75 和 opacity-100 不起作用。

【讨论】：

【参考方案2】：

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

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

【讨论】：

谢谢，但是所有的不透明度都消失了。只有模型主体上的不透明度应该消失。你把类添加到p元素了吗？我也有同样的问题。将 opacity-100 添加到嵌套 div 不会改变任何内容。【参考方案3】：

您需要使用 relative/absolute、opacity 和 z-index

这是jsfiddle working example。

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>

【讨论】：

【参考方案4】：

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

【讨论】：

以上是关于顺风 css 不透明度的主要内容，如果未能解决你的问题，请参考以下文章