How to change background image color

If we use background image as icon and you want to change the color for the same image in different locations in that case you need to create new image with different color and use them. Now there is a better way, use css mask property . Mask property sets the image that is used as mask layer for an element and makes that element transparent, or hidden.

Syntax of this property is similar to background-image.

                 -webkit-mask-image: url(play-icon.png);

                  mask-image: url(play-icon.png);

Now , suppose we want to use play icon in 3 different place and different color.

One way to do this is to create 3 different images of play icon and the better way we use Mask property and use 1 image in different places. See the example-

.icon{
    -webkit-mask: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png");
    width:20px;
    height:20px;
    -webkit-mask-size: cover;
}

.div1 {
    width:100px;
    height:100px;
    background-color:red;    
    float:left;
}
.div2 {
    width:99px;
    height:98px;
    background-color:#fff;    
    float:left;
    border:1px solid #000;
}
.div3 {
    width:100px;
    height:100px;
    background-color:#30a9ff;
    float:left;
}
.icon-blue {
    background: #30a9ff;
}
.icon-red {
    background: red;
}
.icon-white {
    background: #fff;
}