gpt4 book ai didi

css - 顺风 css 不透明度

转载 作者:行者123 更新时间:2023-11-28 14:45:30 25 4
gpt4 key购买 nike

在我的应用程序中,我有一个模型。我在模型上使用不透明度。我现在的问题是模型的主体不应该有不透明度我怎么能解决这个问题?仅在模型外应该有不透明度!

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

最佳答案

我知道已经快三年了,我不确定这是否是您想要的情况。但是使用 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 - 在父级 divbg-opacity-100 中使用 bg-opacity-75 > 在子 div 中。由于某些原因,使用 opacity-75opacity-100 不起作用。

关于css - 顺风 css 不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52346566/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com