css 顺风背景-不透明

vktxenjb 于 2022-12-15 发布在其他

关注(0)|答案(2)|浏览(161)

我尝试使用tailwind将背景不透明度应用于div，我尝试在类中执行此操作，在tailwind.js中不使用自定义设置

<div class="expanded fixed inset-0 bg-black bg-opacity-50 w-full h-full flex items-start justify-center pt-12 z-10">
    <input type="text" class="border-r border-gray">
</div>

这只是显示一个黑色背景，不改变不透明度，所以我在一个自定义类中尝试了它，以防后期处理需要做一些魔术：

.expanded 
    @apply bg-black bg-opacity-50

然而，我只是得到了下面的错误这样做：
@apply不能与.bg-opacity-50一起使用，因为找不到.bg-opacity-50
运行npm list显示我的tailwind版本为1.4.1，应该可以找到支持此功能：

+-- tailwindcss@1.4.1
| +-- @fullhuman/postcss-purgecss@2.1.2
| | +-- postcss@7.0.27 deduped
| | `-- purgecss@2.1.2
| |   +-- commander@5.1.0
| |   +-- glob@7.1.6 deduped
| |   +-- postcss@7.0.27 deduped
| |   `-- postcss-selector-parser@6.0.2 deduped

css

来源：https://stackoverflow.com/questions/61531007/tailwind-background-opacity

2条答案

按热度按时间

wfveoks01#

如果你想减少一个背景的不透明度，你可以做以下的操作：

<div className="bg-gray-200 hover:opacity-25"></div>

tailwind中没有bg-opacity-50选项，我使用的是1.3.5版本，相信和你的版本没有太大的区别，你可以使用以下选项：

opacity-0 {
  opacity: 0;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

赞(0）回复(0）举报 2022-12-15

7kjnsjlb2#

如果你只是想改变背景的不透明度，使用::before。因为你需要找到一种方法来分离背景css。::before是一个伪元素，存在于CSS中，但你不能在HTML中看到它们。

// you could manipulate it the way u want it
// important part is before:opacity-30
// since I set "absolute" make sure its parent is "relative" position
// content should be "" otherwise it wont show on the page at all
const style={
   wrapper: `before:content-[''] before:absolute before:top-0 before:left-0 before:right-0 before:bottom-0 
             before:bg-[url('imageUrl')] before:bg-cover before:bg-center before:opacity-30`,   
}

然后在你的html中：

<div class={style.wrapper}>
    // input also should have "relative". you can test it
    <input type="text" class="border-r relative border-gray">
</div>

赞(0）回复(0）举报 2022-12-15

我来回答

css 顺风背景-不透明

2条答案

相关问题

热门标签

最新问答