[data-color] How to Change the data-color~! bootstrap, navbar, datacolor

CSS

<style>

.sidebar[data-color="myColor"]:after,

.bootstrap-navbar[data-color="purple"]:after {

  background: #FFFFFF;

  background: -moz-linear-gradient(top, #FFFFFF 0%, rgba(148, 59, 234, 0.7) 100%);

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFFFFF), color-stop(100%, rgba(148, 59, 234, 0.7)));

  background: -webkit-linear-gradient(top, #FFFFFF 0%, rgba(148, 59, 234, 0.7) 100%);

  background: -o-linear-gradient(top, #FFFFFF 0%, rgba(148, 59, 234, 0.7) 100%);

  background: -ms-linear-gradient(top, #FFFFFF 0%, rgba(148, 59, 234, 0.7) 100%);

  background: linear-gradient(to bottom, #FFFFFF 0%, rgba(148, 59, 234, 0.7) 100%);

  background-size: 150% 150%;

}

</style>

HTML

<div class="sidebar" data-color="myColor" data-image="/resources/images/manager/full-screen-image-3.jpg">

Result

 ^  0  ^ Does it work as well as you want? 

#data-color #css #datacolor

 

Reference: https://stackoverflow.com/questions/27529374/css-add-color-with-a-data-attribute-attrdata-color-color

Refetence: https://stackoverflow.com/questions/17523613/set-background-with-value-of-data-attribute