透明度opacity

Setting the opacity of an element.

Overview

Examples

Fade an entire element

Use opacity:* to change the opacity of the whole element, including its text, background, border, and children.

<button class="opacity:.5">    Disabled</button>

@layer utilities {    .opacity\:\.5 {        opacity: 0.5    }}

Prefer color alpha for surfaces

When only a color should be translucent, use the color alpha suffix instead of reducing the whole element opacity.

<span class="bg:blue-60/.12 fg:blue-60">Status</span>

This keeps text and child content fully opaque.

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="opacity:1 opacity:.72:hover opacity:1@print">...</div>

Use opacity transitions with care for content that must remain readable.