小程序 透明度不生效_尾风不透明度实用程序类

小程序 透明度不生效

Tailwind 1.4 just got released and with it comes three really cool things:

Tailwind 1.4刚刚发布，它带来了三件非常酷的事情：

1. Color opacity utlities
   颜色不透明性
2. Built-in PurgeCSS
   内置PurgeCSS
3. IE 11 target mode (experimental)
   IE 11目标模式 （实验性）

Let's take a look at the color opacity utilities. We already had the opacity class to set the opacity of an entire element.

让我们看一下颜色不透明度实用程序 。 我们已经有了opacity类来设置整个元素的不透明度。

• opacity-{0|25|50|75|100}
  opacity-{0|25|50|75|100}

The new classes will let us set opacity of certain attributes.

新的类将使我们设置某些属性的不透明度 。

I've often wanted to set the opacity of the background of an element, but not the text of the element. This usually meant I had to write some custom CSS to create:

我经常想设置元素背景的不透明度，而不是元素的文本。 这通常意味着我必须编写一些自定义CSS才能创建：

/_ black background at10% opacity _/
background: rgba(0, 0, 0, 0.1);

Now we have the following classes to set various things!

现在，我们有以下课程来设置各种内容！

• bg-opacity-{value}
  bg-opacity- {value}
• text-opacity-{value}
  文字不透明度-{值}
• border-opacity-{value}
  边界不透明度-{值}
• divide-opacity-{value}
  除透明度-{值}
• placeholder-opacity-{value}
  占位符-不透明度-{值}

The value can be 0, 25, 50, 75, 100

该值可以是0 ， 25 ， 50 ， 75 ， 100

Here's an example:

这是一个例子：

<button class="text-red-100 bg-red-600 bg-opacity-75">
    my background is 75% opacity
</button>

Here's a CodePen for background opacity with Tailwind.

这是用于 Tailwind的背景不透明的CodePen 。

Not sure what the divide-opacity does though 🤷‍♂️

不知道divide-opacity是做什么的🤷‍♂️

翻译自: https://scotch.io/tutorials/tailwind-opacity-utility-classes

小程序 透明度不生效