Built in Background color

Change the element's background color, shading or background opacity on various triggers

Overview

Change the background color of element when these triggers has been performed: User performs hover over element, element gets .active or .show class, or element appears in the viewport and gets .inview class. You can also easily change the shading of element based on these triggers or even background color opacity by changing its alpha channel

Examples

Examples of how to change the background color on hover. Other triggers are available, too.

1. Change the background color of the element that has .bg-* Background color utility class applied, by adding data-tor="hover:bg(<color>)" attribute to this element. Background color will change only when user hovers over that certain element.

2. Change the background color of the single or multiple child elements when the trigger has been performed on parent element. Add data-tor-parent="hover" to indicate that this element is a parent element with the hover trigger. Than add data-tor="hover(p):bg(<color>)" to desired child elements.

3. Change the background color even when the element has background-image applied. Use .bg-blend-* blending mode utility class along with background image utility.

01
Hover trigger

Hover over the color above to see the change

02
Parent trigger

Hover over the whole card to see the change

Bootstrap background color hover example
02
Background image

Hover over the image to see the change

<div class="card">
  <div class="card-img-top bg-primary" data-tor="!hover:bg(purple)"></div>
  ...
</div>

<div class="card" data-tor-parent="hover">
  <div class="card-img-top bg-navy" data-tor="hover(p):bg(dark)"></div>
  <div class="card-body" data-tor="hover(p):bg(gray)"></div>
</div>

<div class="card">
  <div class="card-img-top bg-maroon has-bg-img bg-blend-overlay" data-tor="hover:bg(purple)">
    <img src="..." class="bg-img">
  </div>
  ...
</div>

Triggers

To animate the background color when <trigger> is performed on a single element, use data-tor-fx="<trigger>:bg(<color>) where <trigger> is:

  • inview: - when element appears in the viewport and gets .inview class
  • active: - when element gets .active class
  • show: - when element gets .show class
  • hover: - when element gets :hover state

And <color> is one of the theme colors.

bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)
<div data-tor="hover:bg(primary)">bg(primary)</div>
<div data-tor="hover:bg(secondary)">bg(secondary)</div>
<div data-tor="hover:bg(success)">bg(success)</div>
<div data-tor="hover:bg(danger)">bg(danger)</div>
<div data-tor="hover:bg(warning)">bg(warning)</div>
<div data-tor="hover:bg(info)">bg(info)</div>
<div data-tor="hover:bg(light)">bg(light)</div>
<div data-tor="hover:bg(dark)">bg(dark)</div>
<div data-tor="hover:bg(white)">bg(white)</div>
<div data-tor="hover:bg(transparent)">bg(transparent)</div>
bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)
<div data-tor="active:bg(primary)">bg(primary)</div>
<div data-tor="active:bg(secondary)">bg(secondary)</div>
<div data-tor="active:bg(success)">bg(success)</div>
<div data-tor="active:bg(danger)">bg(danger)</div>
<div data-tor="active:bg(warning)">bg(warning)</div>
<div data-tor="active:bg(info)">bg(info)</div>
<div data-tor="active:bg(light)">bg(light)</div>
<div data-tor="active:bg(dark)">bg(dark)</div>
<div data-tor="active:bg(white)">bg(white)</div>
<div data-tor="active:bg(transparent)">bg(transparent)</div>
bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)
<div data-tor="inview:bg(primary)">bg(primary)</div>
<div data-tor="inview:bg(secondary)">bg(secondary)</div>
<div data-tor="inview:bg(success)">bg(success)</div>
<div data-tor="inview:bg(danger)">bg(danger)</div>
<div data-tor="inview:bg(warning)">bg(warning)</div>
<div data-tor="inview:bg(info)">bg(info)</div>
<div data-tor="inview:bg(light)">bg(light)</div>
<div data-tor="inview:bg(dark)">bg(dark)</div>
<div data-tor="inview:bg(white)">bg(white)</div>
<div data-tor="inview:bg(transparent)">bg(transparent)</div>

Parent triggers

To animate the background color of a single or multiple child elements when <trigger> is performed on a parent element, add data-tor-fx-trigger="<inview|active|show|hover> to indicate that this is a parent element with the desired trigger - if this parent trigger is performed, child elements will be affected (will change)

Than add data-tor-fx="<trigger>:bg(<color>) attribute to child elements where <trigger> is:

  • inview(p): - when .inview class is applied on Parent trigger element, because it's visible in the viewport
  • active(p): - when .active class is applied on Parent trigger element
  • show(p): - when .show class is applied on Parent trigger element
  • hover(p): - when hover state is applied on Parent trigger element

And <color> is one of the theme colors.

bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)
<div data-tor="hover(p):bg(primary)">bg(primary)</div>
<div data-tor="hover(p):bg(secondary)">bg(secondary)</div>
<div data-tor="hover(p):bg(success)">bg(success)</div>
<div data-tor="hover(p):bg(danger)">bg(danger)</div>
<div data-tor="hover(p):bg(warning)">bg(warning)</div>
<div data-tor="hover(p):bg(info)">bg(info)</div>
<div data-tor="hover(p):bg(light)">bg(light)</div>
<div data-tor="hover(p):bg(dark)">bg(dark)</div>
<div data-tor="hover(p):bg(white)">bg(white)</div>
<div data-tor="hover(p):bg(transparent)">bg(transparent)</div>
bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)
<div data-tor="active(p):bg(primary)">bg(primary)</div>
<div data-tor="active(p):bg(secondary)">bg(secondary)</div>
<div data-tor="active(p):bg(success)">bg(success)</div>
<div data-tor="active(p):bg(danger)">bg(danger)</div>
<div data-tor="active(p):bg(warning)">bg(warning)</div>
<div data-tor="active(p):bg(info)">bg(info)</div>
<div data-tor="active(p):bg(light)">bg(light)</div>
<div data-tor="active(p):bg(dark)">bg(dark)</div>
<div data-tor="active(p):bg(white)">bg(white)</div>
<div data-tor="active(p):bg(transparent)">bg(transparent)</div>
bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)
<div data-tor="inview(p):bg(primary)">bg(primary)</div>
<div data-tor="inview(p):bg(secondary)">bg(secondary)</div>
<div data-tor="inview(p):bg(success)">bg(success)</div>
<div data-tor="inview(p):bg(danger)">bg(danger)</div>
<div data-tor="inview(p):bg(warning)">bg(warning)</div>
<div data-tor="inview(p):bg(info)">bg(info)</div>
<div data-tor="inview(p):bg(light)">bg(light)</div>
<div data-tor="inview(p):bg(dark)">bg(dark)</div>
<div data-tor="inview(p):bg(white)">bg(white)</div>
<div data-tor="inview(p):bg(transparent)">bg(transparent)</div>

Customizations

Modify the current background color defined by .bg-* Background color utility class by changing its lightness, darkness or opacity.

Lighten

Change the background lightness by adding data-tor="<trigger>:bg-lighten(<amount>)". Where <amount> is a number from 1 to 5. You can change this amount by modifing the $shading-levels variable.

Triggers

Use data-tor="<inview|active|show|hover>:bg-lighten(<amount>)" to change the background lightness of a single element.

bg-lighten(xs)
bg-lighten(sm)
bg-lighten(md)
bg-lighten(lg)
bg-lighten(xl)
<div class="bg-primary" data-tor="hover:bg-lighten(xs)">bg-lighten(xs)</div>
<div class="bg-primary" data-tor="hover:bg-lighten(sm)">bg-lighten(sm)</div>
<div class="bg-primary" data-tor="hover:bg-lighten(md)">bg-lighten(md)</div>
<div class="bg-primary" data-tor="hover:bg-lighten(lg)">bg-lighten(lg)</div>
<div class="bg-primary" data-tor="hover:bg-lighten(xl)">bg-lighten(xl)</div>
bg-lighten(xs)
bg-lighten(sm)
bg-lighten(md)
bg-lighten(lg)
bg-lighten(xl)
<div class="bg-primary" data-tor="active:bg-lighten(xs)">bg-lighten(xs)</div>
<div class="bg-primary" data-tor="active:bg-lighten(sm)">bg-lighten(sm)</div>
<div class="bg-primary" data-tor="active:bg-lighten(md)">bg-lighten(md)</div>
<div class="bg-primary" data-tor="active:bg-lighten(lg)">bg-lighten(lg)</div>
<div class="bg-primary" data-tor="active:bg-lighten(xl)">bg-lighten(xl)</div>
bg-lighten(xs)
bg-lighten(sm)
bg-lighten(md)
bg-lighten(lg)
bg-lighten(xl)
<div class="bg-primary" data-tor="inview:bg-lighten(xs)">bg-lighten(xs)</div>
<div class="bg-primary" data-tor="inview:bg-lighten(sm)">bg-lighten(sm)</div>
<div class="bg-primary" data-tor="inview:bg-lighten(md)">bg-lighten(md)</div>
<div class="bg-primary" data-tor="inview:bg-lighten(lg)">bg-lighten(lg)</div>
<div class="bg-primary" data-tor="inview:bg-lighten(xl)">bg-lighten(xl)</div>
Parent triggers

Use data-tor="<inview(p)|active(p)|show(p)|hover(p)>:bg-lighten(<amount>)" to change the background lightness of an element (elements) when a certain triggers has been performed on a parent element.

bg-lighten(xs)
bg-lighten(sm)
bg-lighten(md)
bg-lighten(lg)
bg-lighten(xl)
<div class="bg-primary" data-tor="hover(p):bg-lighten(xs)">bg-lighten(xs)</div>
<div class="bg-primary" data-tor="hover(p):bg-lighten(sm)">bg-lighten(sm)</div>
<div class="bg-primary" data-tor="hover(p):bg-lighten(md)">bg-lighten(md)</div>
<div class="bg-primary" data-tor="hover(p):bg-lighten(lg)">bg-lighten(lg)</div>
<div class="bg-primary" data-tor="hover(p):bg-lighten(xl)">bg-lighten(xl)</div>
bg-lighten(xs)
bg-lighten(sm)
bg-lighten(md)
bg-lighten(lg)
bg-lighten(xl)
<div class="bg-primary" data-tor="active(p):bg-lighten(xs)">bg-lighten(xs)</div>
<div class="bg-primary" data-tor="active(p):bg-lighten(sm)">bg-lighten(sm)</div>
<div class="bg-primary" data-tor="active(p):bg-lighten(md)">bg-lighten(md)</div>
<div class="bg-primary" data-tor="active(p):bg-lighten(lg)">bg-lighten(lg)</div>
<div class="bg-primary" data-tor="active(p):bg-lighten(xl)">bg-lighten(xl)</div>
bg-lighten(xs)
bg-lighten(sm)
bg-lighten(md)
bg-lighten(lg)
bg-lighten(xl)
<div class="bg-primary" data-tor="inview(p):bg-lighten(xs)">bg-lighten(xs)</div>
<div class="bg-primary" data-tor="inview(p):bg-lighten(sm)">bg-lighten(sm)</div>
<div class="bg-primary" data-tor="inview(p):bg-lighten(md)">bg-lighten(md)</div>
<div class="bg-primary" data-tor="inview(p):bg-lighten(lg)">bg-lighten(lg)</div>
<div class="bg-primary" data-tor="inview(p):bg-lighten(xl)">bg-lighten(xl)</div>

Darken

Change the background darkness by adding data-tor="<trigger>:bg-darken(<amount>)". Where <amount> is a number from 1 to 5. You can change this amount by modifying the $shading-levels variable.

Triggers

Use data-tor="<inview|active|show|hover>:bg-darken(<amount>)" to change the background darkness of a single element.

bg-darken(xs)
bg-darken(sm)
bg-darken(md)
bg-darken(lg)
bg-darken(xl)
<div class="bg-primary" data-tor="hover:bg-darken(xs)">bg-darken(xs)</div>
<div class="bg-primary" data-tor="hover:bg-darken(sm)">bg-darken(sm)</div>
<div class="bg-primary" data-tor="hover:bg-darken(md)">bg-darken(md)</div>
<div class="bg-primary" data-tor="hover:bg-darken(lg)">bg-darken(lg)</div>
<div class="bg-primary" data-tor="hover:bg-darken(xl)">bg-darken(xl)</div>
bg-darken(xs)
bg-darken(sm)
bg-darken(md)
bg-darken(lg)
bg-darken(xl)
<div class="bg-primary" data-tor="active:bg-darken(xs)">bg-darken(xs)</div>
<div class="bg-primary" data-tor="active:bg-darken(sm)">bg-darken(sm)</div>
<div class="bg-primary" data-tor="active:bg-darken(md)">bg-darken(md)</div>
<div class="bg-primary" data-tor="active:bg-darken(lg)">bg-darken(lg)</div>
<div class="bg-primary" data-tor="active:bg-darken(xl)">bg-darken(xl)</div>
bg-darken(xs)
bg-darken(sm)
bg-darken(md)
bg-darken(lg)
bg-darken(xl)
<div class="bg-primary" data-tor="inview:bg-darken(xs)">bg-darken(xs)</div>
<div class="bg-primary" data-tor="inview:bg-darken(sm)">bg-darken(sm)</div>
<div class="bg-primary" data-tor="inview:bg-darken(md)">bg-darken(md)</div>
<div class="bg-primary" data-tor="inview:bg-darken(lg)">bg-darken(lg)</div>
<div class="bg-primary" data-tor="inview:bg-darken(xl)">bg-darken(xl)</div>
Parent triggers

Use data-tor="<inview(p)|active(p)|show(p)|hover(p)>:bg-darken(<amount>)" to change the background darkness of an element (elements) when a certain triggers has been performed on a parent element.

bg-darken(xs)
bg-darken(sm)
bg-darken(md)
bg-darken(lg)
bg-darken(xl)
<div class="bg-primary" data-tor="hover(p):bg-darken(xs)">bg-darken(xs)</div>
<div class="bg-primary" data-tor="hover(p):bg-darken(sm)">bg-darken(sm)</div>
<div class="bg-primary" data-tor="hover(p):bg-darken(md)">bg-darken(md)</div>
<div class="bg-primary" data-tor="hover(p):bg-darken(lg)">bg-darken(lg)</div>
<div class="bg-primary" data-tor="hover(p):bg-darken(xl)">bg-darken(xl)</div>
bg-darken(xs)
bg-darken(sm)
bg-darken(md)
bg-darken(lg)
bg-darken(xl)
<div class="bg-primary" data-tor="active(p):bg-darken(xs)">bg-darken(xs)</div>
<div class="bg-primary" data-tor="active(p):bg-darken(sm)">bg-darken(sm)</div>
<div class="bg-primary" data-tor="active(p):bg-darken(md)">bg-darken(md)</div>
<div class="bg-primary" data-tor="active(p):bg-darken(lg)">bg-darken(lg)</div>
<div class="bg-primary" data-tor="active(p):bg-darken(xl)">bg-darken(xl)</div>
bg-darken(xs)
bg-darken(sm)
bg-darken(md)
bg-darken(lg)
bg-darken(xl)
<div class="bg-primary" data-tor="inview(p):bg-darken(xs)">bg-darken(xs)</div>
<div class="bg-primary" data-tor="inview(p):bg-darken(sm)">bg-darken(sm)</div>
<div class="bg-primary" data-tor="inview(p):bg-darken(md)">bg-darken(md)</div>
<div class="bg-primary" data-tor="inview(p):bg-darken(lg)">bg-darken(lg)</div>
<div class="bg-primary" data-tor="inview(p):bg-darken(xl)">bg-darken(xl)</div>

Opacity

Change the background opacity by adding data-tor="<trigger>:bg-opacity(<amount>)". This will change the alpha channel of the background color that uses CSS hsla() function.

Triggers

Use data-tor="<inview|active|show|hover>:bg-opacity(<amount>)" to change the background opacity of a single element.

bg-opacity(0%)
bg-opacity(5%)
bg-opacity(10%)
bg-opacity(20%)
bg-opacity(30%)
bg-opacity(40%)
bg-opacity(50%)
bg-opacity(60%)
bg-opacity(70%)
bg-opacity(80%)
bg-opacity(90%)
bg-opacity(100%)
<div class="bg-primary" data-tor="hover:bg-opacity(0%)">bg-opacity(0%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(5%)">bg-opacity(5%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(10%)">bg-opacity(10%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(20%)">bg-opacity(20%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(30%)">bg-opacity(30%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(40%)">bg-opacity(40%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(50%)">bg-opacity(50%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(60%)">bg-opacity(60%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(70%)">bg-opacity(70%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(80%)">bg-opacity(80%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(90%)">bg-opacity(90%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(100%)">bg-opacity(100%)</div>
bg-opacity(0%)
bg-opacity(5%)
bg-opacity(10%)
bg-opacity(20%)
bg-opacity(30%)
bg-opacity(40%)
bg-opacity(50%)
bg-opacity(60%)
bg-opacity(70%)
bg-opacity(80%)
bg-opacity(90%)
bg-opacity(100%)
<div class="bg-primary" data-tor="active:bg-opacity(0%)">bg-opacity(0%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(5%)">bg-opacity(5%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(10%)">bg-opacity(10%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(20%)">bg-opacity(20%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(30%)">bg-opacity(30%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(40%)">bg-opacity(40%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(50%)">bg-opacity(50%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(60%)">bg-opacity(60%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(70%)">bg-opacity(70%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(80%)">bg-opacity(80%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(90%)">bg-opacity(90%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(100%)">bg-opacity(100%)</div>
bg-opacity(0%)
bg-opacity(5%)
bg-opacity(10%)
bg-opacity(20%)
bg-opacity(30%)
bg-opacity(40%)
bg-opacity(50%)
bg-opacity(60%)
bg-opacity(70%)
bg-opacity(80%)
bg-opacity(90%)
bg-opacity(100%)
<div class="bg-primary" data-tor="inview:bg-opacity(0%)">bg-opacity(0%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(5%)">bg-opacity(5%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(10%)">bg-opacity(10%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(20%)">bg-opacity(20%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(30%)">bg-opacity(30%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(40%)">bg-opacity(40%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(50%)">bg-opacity(50%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(60%)">bg-opacity(60%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(70%)">bg-opacity(70%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(80%)">bg-opacity(80%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(90%)">bg-opacity(90%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(100%)">bg-opacity(100%)</div>
Parent triggers

Use data-tor="<inview(p)|active(p)|show(p)|hover(p)>:bg-opacity(<amount>)" to change the background opacity of an element (elements) when a certain triggers has been performed on a parent element.

bg-opacity(0%)
bg-opacity(5%)
bg-opacity(10%)
bg-opacity(20%)
bg-opacity(30%)
bg-opacity(40%)
bg-opacity(50%)
bg-opacity(60%)
bg-opacity(70%)
bg-opacity(80%)
bg-opacity(90%)
bg-opacity(100%)
<div class="bg-primary" data-tor="hover(p):bg-opacity(0%)">bg-opacity(0%)</div>
<div class="bg-primary" data-tor="hover(p):bg-opacity(5%)">bg-opacity(5%)</div>
<div class="bg-primary" data-tor="hover(p):bg-opacity(10%)">bg-opacity(10%)</div>
<div class="bg-primary" data-tor="hover(p):bg-opacity(20%)">bg-opacity(20%)</div>
<div class="bg-primary" data-tor="hover(p):bg-opacity(30%)">bg-opacity(30%)</div>
<div class="bg-primary" data-tor="hover(p):bg-opacity(40%)">bg-opacity(40%)</div>
<div class="bg-primary" data-tor="hover(p):bg-opacity(50%)">bg-opacity(50%)</div>
<div class="bg-primary" data-tor="hover(p):bg-opacity(60%)">bg-opacity(60%)</div>
<div class="bg-primary" data-tor="hover(p):bg-opacity(70%)">bg-opacity(70%)</div>
<div class="bg-primary" data-tor="hover(p):bg-opacity(80%)">bg-opacity(80%)</div>
<div class="bg-primary" data-tor="hover(p):bg-opacity(90%)">bg-opacity(90%)</div>
<div class="bg-primary" data-tor="hover(p):bg-opacity(100%)">bg-opacity(100%)</div>
bg-opacity(0%)
bg-opacity(5%)
bg-opacity(10%)
bg-opacity(20%)
bg-opacity(30%)
bg-opacity(40%)
bg-opacity(50%)
bg-opacity(60%)
bg-opacity(70%)
bg-opacity(80%)
bg-opacity(90%)
bg-opacity(100%)
<div class="bg-primary" data-tor="active(p):bg-opacity(0%)">bg-opacity(0%)</div>
<div class="bg-primary" data-tor="active(p):bg-opacity(5%)">bg-opacity(5%)</div>
<div class="bg-primary" data-tor="active(p):bg-opacity(10%)">bg-opacity(10%)</div>
<div class="bg-primary" data-tor="active(p):bg-opacity(20%)">bg-opacity(20%)</div>
<div class="bg-primary" data-tor="active(p):bg-opacity(30%)">bg-opacity(30%)</div>
<div class="bg-primary" data-tor="active(p):bg-opacity(40%)">bg-opacity(40%)</div>
<div class="bg-primary" data-tor="active(p):bg-opacity(50%)">bg-opacity(50%)</div>
<div class="bg-primary" data-tor="active(p):bg-opacity(60%)">bg-opacity(60%)</div>
<div class="bg-primary" data-tor="active(p):bg-opacity(70%)">bg-opacity(70%)</div>
<div class="bg-primary" data-tor="active(p):bg-opacity(80%)">bg-opacity(80%)</div>
<div class="bg-primary" data-tor="active(p):bg-opacity(90%)">bg-opacity(90%)</div>
<div class="bg-primary" data-tor="active(p):bg-opacity(100%)">bg-opacity(100%)</div>
bg-opacity(0%)
bg-opacity(5%)
bg-opacity(10%)
bg-opacity(20%)
bg-opacity(30%)
bg-opacity(40%)
bg-opacity(50%)
bg-opacity(60%)
bg-opacity(70%)
bg-opacity(80%)
bg-opacity(90%)
bg-opacity(100%)
<div class="bg-primary" data-tor="inview(p):bg-opacity(0%)">bg-opacity(0%)</div>
<div class="bg-primary" data-tor="inview(p):bg-opacity(5%)">bg-opacity(5%)</div>
<div class="bg-primary" data-tor="inview(p):bg-opacity(10%)">bg-opacity(10%)</div>
<div class="bg-primary" data-tor="inview(p):bg-opacity(20%)">bg-opacity(20%)</div>
<div class="bg-primary" data-tor="inview(p):bg-opacity(30%)">bg-opacity(30%)</div>
<div class="bg-primary" data-tor="inview(p):bg-opacity(40%)">bg-opacity(40%)</div>
<div class="bg-primary" data-tor="inview(p):bg-opacity(50%)">bg-opacity(50%)</div>
<div class="bg-primary" data-tor="inview(p):bg-opacity(60%)">bg-opacity(60%)</div>
<div class="bg-primary" data-tor="inview(p):bg-opacity(70%)">bg-opacity(70%)</div>
<div class="bg-primary" data-tor="inview(p):bg-opacity(80%)">bg-opacity(80%)</div>
<div class="bg-primary" data-tor="inview(p):bg-opacity(90%)">bg-opacity(90%)</div>
<div class="bg-primary" data-tor="inview(p):bg-opacity(100%)">bg-opacity(100%)</div>