---json
{
    "description": "The opacity attribute permits to set the opacity (alpha\/transparency) of any component.",
    "page_id": "63xpitmcite9wbwpvxwhf",
    "title": "How to set the Opacity \/ Alpha or Transparency"
}
---
====== ComboStrap Styling - Opacity (Transparency) ======

===== About =====
''opacity'' (ie alpha or transparency) is a [[color|color]] effect that renders a component more or less transparent.


===== Syntax =====

<code dw>
opacity=value
</code>
where the value goes:
  * from ''1'' (no opacity, default)
  * to ''0'', completely opaque, not visible).


''Opacity'' brings depth and is mostly used with [[#background|background]]

===== Example =====

==== Image ====
With a [[docs:content:raster|raster image]]
<webcode name="Default" frameborder=0>
<code dw>

<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>
</code>
</webcode>

==== Background Opacity ====

Opacity is mostly used with [[docs:styling:background|background]]

Example with a [[release:deprecated:slide|slide]] and a [[background|background]]
<webcode name="Default" frameborder="0">
<code dw>
<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>
</code>
</webcode>