Back to Hugo

images.Opacity

docs/content/en/functions/images/Opacity.md

0.161.1984 B
Original Source

The opacity value must be in the range [0, 1]. A value of 0 produces a transparent image, and a value of 1 produces an opaque image (no transparency).

Usage

Create the filter:

go-html-template
{{ $filter := images.Opacity 0.65 }}

{{% include "/_common/functions/images/apply-image-filter.md" %}}

The images.Opacity filter is most useful for target formats such as PNG and WebP that support transparency. If the source image does not support transparency, combine this filter with the images.Process filter:

go-html-template
{{ with resources.Get "images/original.jpg" }}
  {{ $filters := slice
    (images.Opacity 0.65)
    (images.Process "png")
  }}
  {{ with . | images.Filter $filters }}
    
  {{ end }}
{{ end }}

Example

{{< img src="images/examples/zion-national-park.jpg" alt="Zion National Park" filter="Opacity" filterArgs="0.65" example=true

}}