DnnContra Transparency

Using transparency on backgrounds in the dnncontra theme

Built into the DnnContra theme there are many css classes that make it easy to change the way the theme looks. One of these classes is allow you to add transparency to backgrounds.

Here is how you can use the transparency classes:

Opacity 1
Opacity 2
Opacity 3
Opacity 4
Opacity 5
Opacity 6

    
<div class="row">
<div class="col-md-12">
<div class="teal opacity-1">Opacity 1</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="teal opacity-2">Opacity 2</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="teal opacity-3">Opacity 3</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="teal opacity-4">Opacity 4</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="teal opacity-5">Opacity 5</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="teal opacity-6">Opacity 6</div>
</div>
</div>

Transparency classes

Class name Description
opacity-1 Transparency of 10%
opacity-2 Transparency of 20%
opacity-3 Transparency of 30%
opacity-4 Transparency of 40%
opacity-5 Transparency of 50%
opacity-6 Transparency of 60%
opacity-7 Transparency of 70%
opacity-8 Transparency of 80%
opacity-9 Transparency of 90%