How to set the Opacity / Alpha or Transparency

Undraw My Documents

About

opacity (ie alpha or transparency) is a color effect that renders a component more or less transparent.

Syntax

opacity=value

where the value goes:

  • from 1 (no opacity, default)
  • to 0, completely opaque, not visible).

Opacity brings depth and is mostly used with background

Example

Image

With a raster image

<row>
<cell>
^ With an opacity of ''0.5'' ^
| {{:docs:block:stock_image_surfer_in_the_see.png?300&opacity=0.5}} |
</cell>
<cell>
^  Without opacity  ^
| {{:docs:block:stock_image_surfer_in_the_see.png?300}} |
</cell>
</row>
With an opacity of 0.5
Stock Image Surfer In The See
Without opacity
Stock Image Surfer In The See

Background Opacity

Opacity is mostly used with background

Example with a slide and a background

<slide color="steelblue" text-align="center" >
   <background opacity="0.3">{{:docs:block:stock_image_surfer_in_the_see.png|}}</background>
   <title 2>A background with an opacity of 0.3</title>
</slide>
A background with an opacity of 0.3




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Recommended Pages
Undraw My Documents
Background styling - Add any background to your ComboStrap component

The background element permits you to add any background to your ComboStrap component in an easy and declarative way.
Undraw My Documents
ComboStrap UI - Styling

Styling in ComboStrap is the possibility to render every component as you wish. ComboStrap has three levels of styling: the bootstrap stylesheet level - bootstrap standard theme the user stylesheet...
Lazy Responsive Load
Raster Image in ComboStrap (jpg, png, ...)

From lazy loading to automatic resizing, this page tells you how ComboStrap manages raster image



Task Runner