Background overlay
You can add bg-overlay-black-10 class to any element in your HTML code to apply overlay color on any image or any section. See example below:
<div class="bg-overlay-black-1"> [YOUR CONTENT] </div>
Here are some predefined overlay classes you can use:
| Class | Description | Class | Description |
|---|---|---|---|
bg-overlay-black-10 |
Apply black color overlay with 0.10 overlay | bg-overlay-black-20 |
Apply black color overlay with 0.20 overlay |
bg-overlay-black-30 |
Apply black color overlay with 0.30 overlay | bg-overlay-black-40 |
Apply black color overlay with 0.40 overlay |
bg-overlay-black-50 |
Apply black color overlay with 0.50 overlay | bg-overlay-black-60 |
Apply black color overlay with 0.60 overlay |
bg-overlay-black-70 |
Apply black color overlay with 0.70 overlay | bg-overlay-black-80 |
Apply black color overlay with 0.80 overlay |
bg-overlay-black-90 |
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.