Background overlay
You can add this .bg-overlay-black-10
class to any element in your HTML code to apply overly color on any image or any section. See example below:
<div class="bg-overlay-black-10"> [YOUR CONTENT] </div>
Here are some predefined overlay classes you can use:
Class | Description | Class | Description |
---|---|---|---|
.bg-overlay-black-10 |
which means apply black color overlay with 0.10 overlay | .bg-overlay-black-20 |
which means apply black color overlay with 0.20 overlay |
.bg-overlay-black-30 |
which means apply black color overlay with 0.30 overlay | .bg-overlay-black-40 |
which means apply black color overlay with 0.40 overlay |
.bg-overlay-black-50 |
which means apply black color overlay with 0.50 overlay | .bg-overlay-black-60 |
which means apply black color overlay with 0.60 overlay |
.bg-overlay-black-70 |
which means apply black color overlay with 0.70 overlay | .bg-overlay-black-80 |
which means apply black color overlay with 0.80 overlay |
.bg-overlay-black-90 |
which means apply black color overlay with 0.90 overlay |
Note You can create your own helper classes by creating the class in the stylesheet as per your requirement. This helper class only support RGBA
color values.