How to change background image color

Posted By : Priya verma | 21-Jun-2016

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-


 
HTML
 


<div class="div1">
   <div class="icon icon-blue"></div>
</div>
<div class="div2">
   <div class="icon icon-red"></div>
</div>
<div class="div3">
   <div class="icon icon-white "></div>
</div>

 
 
CSS
 
.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;
}
 
THANKS

About Author

Author Image
Priya verma

Priya is a bright UI designer, having skills in , HTML, CSS, javascript, bootstrap. Her hobbies are playing outdoor games.

Request for Proposal

Name is required

Comment is required

Sending message..