ComboStrap Styling - Opacity (Transparency)

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
Without opacity

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

Powered by ComboStrap