HUGO

  • 新闻
  • 文档
  • 主题
  • 社区
  • GitHub
  • 关于 Hugo
    • In this section
    • Introduction
    • Features
    • Privacy
    • Security
    • License
  • 安装
    • In this section
    • macOS
    • Linux
    • Windows
    • BSD
  • 入门
    • In this section
    • Quick start
    • Basic usage
    • Directory structure
    • Configuration
    • Configure markup
    • Glossary of terms
    • External learning resources
  • Quick reference
    • In this section
    • Emojis
    • Functions
    • Methods
    • Page collections
  • 内容管理
    • In this section
    • Organization
    • Page bundles
    • Content formats
    • Front matter
    • Build options
    • Page resources
    • Image processing
    • Shortcodes
    • Related content
    • Sections
    • Content types
    • Archetypes
    • Taxonomies
    • Summaries
    • Links and cross references
    • URL management
    • Menus
    • Comments
    • Multilingual
    • Markdown attributes
    • Syntax highlighting
    • Diagrams
    • Mathematics
    • Data sources
    • Content adapters
  • 模板
    • In this section
    • Introduction
    • Template types
    • Lookup order
    • Base templates
    • Home templates
    • Single templates
    • Section templates
    • Taxonomy templates
    • Term templates
    • Partial templates
    • Content view templates
    • Shortcode templates
    • Sitemap templates
    • RSS templates
    • 404 templates
    • robots.txt templates
    • Menus
    • Pagination
    • Embedded templates
    • Custom output formats
  • 函数
    • In this section
    • cast
    • collections
    • compare
    • crypto
    • css
    • data
    • debug
    • diagrams
    • encoding
    • fmt
    • global
    • go template
    • hash
    • hugo
    • images
    • inflect
    • js
    • lang
    • math
    • openapi3
    • os
    • partials
    • path
    • reflect
    • resources
    • safe
    • strings
    • templates
    • time
    • transform
    • urls
  • 方法
    • In this section
    • Duration
    • Menu
    • Menu entry
    • Page
    • Pager
    • Pages
    • Resource
    • Shortcode
    • Site
    • Taxonomy
    • Time
  • Render hooks
    • In this section
    • Introduction
    • Blockquotes
    • Code blocks
    • Headings
    • Images
    • Links
    • Passthrough
    • Tables
  • Hugo Modules
    • In this section
    • Configure Hugo modules
    • Use Hugo Modules
    • Theme components
  • Hugo Pipes
    • In this section
    • Introduction
    • Transpile Sass to CSS
    • PostCSS
    • PostProcess
    • JavaScript building
    • Babel
    • Asset minification
    • Concatenating assets
    • Fingerprinting and SRI hashing
    • Resource from string
    • Resource from template
  • CLI
  • 故障排除
    • In this section
    • Audit
    • Logging
    • Inspection
    • Deprecation
    • Performance
    • FAQs
  • 开发工具
    • In this section
    • Editor plugins
    • Front-ends
    • Search
    • Migrations
    • Other projects
  • 托管 & 部署
    • In this section
    • Hugo Deploy
    • Deploy with Rclone
    • Deploy with Rsync
    • Host on 21YunBox
    • Host on AWS Amplify
    • Host on Azure Static Web Apps
    • Host on Cloudflare Pages
    • Host on Firebase
    • Host on GitHub Pages
    • Host on GitLab Pages
    • Host on KeyCDN
    • Host on Netlify
    • Host on Render
  • 贡献
    • In this section
    • Development
    • Documentation
    • Themes
  • Maintenance
FUNCTIONS IMAGE FUNCTIONS

images.Opacity

Returns an image filter that changes the opacity of an image.

Syntax

images.Opacity OPACITY

Returns

images.filter
New in v0.119.0

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:

{{ $filter := images.Opacity 0.65 }}

Apply the filter using the images.Filter function:

{{ with resources.Get "images/original.jpg" }}
  {{ with . | images.Filter $filter }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

You can also apply the filter using the Filter method on a Resource object:

{{ with resources.Get "images/original.jpg" }}
  {{ with .Filter $filter }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

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:

{{ with resources.Get "images/original.jpg" }}
  {{ $filters := slice
    (images.Opacity 0.65)
    (images.Process "png")
  }}
  {{ with . | images.Filter $filters }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

Example

Original

Zion National Park

Processed

Zion National Park

See also

  • images.Filter
  • Filter

On this page

  • Usage
  • Example

In this section

  • images.AutoOrient
  • images.Brightness
  • images.ColorBalance
  • images.Colorize
  • images.Config
  • images.Contrast
  • images.Dither
  • images.Filter
  • images.Gamma
  • images.GaussianBlur
  • images.Grayscale
  • images.Hue
  • images.Invert
  • images.Opacity
  • images.Overlay
  • images.Padding
  • images.Pixelate
  • images.Process
  • images.Saturation
  • images.Sepia
  • images.Sigmoid
  • images.Text
  • images.UnsharpMask
Last updated: December 4, 2023: Squashed 'docs/' changes from 4d936aee6..4dd2d6415 (35dec7c9)
By the Hugo Authors
Hugo Logo
  • File an Issue
  • Get Help
  • @GoHugoIO
  • @spf13
  • @bepsays
 

The Hugo logos are copyright © Steve Francia 2013–2024.

The Hugo Gopher is based on an original work by Renée French.

  • 新闻
  • 文档
  • 主题
  • 社区
  • GitHub
  • 关于 Hugo
  • 安装
  • 入门
  • Quick reference
  • 内容管理
  • 模板
  • 函数
  • 方法
  • Render hooks
  • Hugo Modules
  • Hugo Pipes
  • CLI
  • 故障排除
  • 开发工具
  • 托管 & 部署
  • 贡献
  • Maintenance