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 | ||
.bg-overlay-white-10 | which means apply white color overlay with 0.10 overlay | .bg-overlay-white-20 | which means apply white color overlay with 0.20 overlay |
.bg-overlay-white-30 | which means apply white color overlay with 0.30 overlay | .bg-overlay-white-40 | which means apply white color overlay with 0.40 overlay |
.bg-overlay-white-50 | which means apply white color overlay with 0.50 overlay | .bg-overlay-white-60 | which means apply white color overlay with 0.60 overlay |
.bg-overlay-white-70 | which means apply white color overlay with 0.70 overlay | .bg-overlay-white-80 | which means apply white color overlay with 0.80 overlay |
.bg-overlay-white-90 | which means apply white 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.