How to use background image opacity in v3?

[sc0rp10n-py]

The docs say that opacity can be changed with
bg-sky-500/[.06]
and to use background image we can use this
bg-[url('/home.webp')]

how can i merge them together?

[wongjn]

You cannot directly. The [0.6] of bg-sky-500/[.06] changes the alpha value of a color value for the background-color property. bg-[url(…)] sets an image value for the background-image property. There is no intersection here of concepts here and there is no current way in CSS (and thus by extension, Tailwind) to modify an opacity of a background image directly.

Alternative implementations I can think of right now would be:

• Apply opacity effect in the image file directly.
• Add an opacity to the element that the background image is applied to, but this would affect any content within said element.
• Apply a translucent solid color linear-gradient() on top of the background image that is the same color as the background color behind the element, but this only works for a solid color background.