Reduce size (mask-image). Can you help me?

Color is fixed White color icon.png to blue color icon.png (html/css), but minimum (or maximum) how to do?

div {

 width: 50px;

 height: 50px;

 margin: 50px;

 padding: 50px;

 top: 50px;

 bottom: 50px;

 left: 50px;

 right: 50px;

 background-size: 50px;

 mask-size: 50px; /* not supported by Chrome */

 -webkit-mask-image: 50px; /* also not supported by Chrome */



 background-color: blue; /* select your want color */

 -webkit-mask-image: 

 url(https://image.flaticon.com/icons/png/512/54/54591.png);

 mask-image: url(https://image.flaticon.com/icons/png/512/54/54591.png);

 mask-repeat:no-repeat;

 -webkit-mask-repeat:no-repeat;

}



<div></div>

How to reduce size?

margin: 50px; padding: 50px;

left: 50px; right: 50px; top: 50px; bottom: 50px;

background-size: 50px;

mask-size: 50px;

no, not supported by Chrome

webkit-mask-size: 50px;

no, also not supported by Chrome

width: 50px; height: 50px;

and no

What to do?

asked Jan 2 at 14:53

Dani

you want to reduce the size of the mask or the size of the whole icon?

– Temani Afif
Jan 2 at 15:05

add a comment |

Color is fixed White color icon.png to blue color icon.png (html/css), but minimum (or maximum) how to do?

div {

 width: 50px;

 height: 50px;

 margin: 50px;

 padding: 50px;

 top: 50px;

 bottom: 50px;

 left: 50px;

 right: 50px;

 background-size: 50px;

 mask-size: 50px; /* not supported by Chrome */

 -webkit-mask-image: 50px; /* also not supported by Chrome */



 background-color: blue; /* select your want color */

 -webkit-mask-image: 

 url(https://image.flaticon.com/icons/png/512/54/54591.png);

 mask-image: url(https://image.flaticon.com/icons/png/512/54/54591.png);

 mask-repeat:no-repeat;

 -webkit-mask-repeat:no-repeat;

}



<div></div>

How to reduce size?

margin: 50px; padding: 50px;

left: 50px; right: 50px; top: 50px; bottom: 50px;

background-size: 50px;

mask-size: 50px;

no, not supported by Chrome

webkit-mask-size: 50px;

no, also not supported by Chrome

width: 50px; height: 50px;

and no

What to do?

asked Jan 2 at 14:53

Dani

you want to reduce the size of the mask or the size of the whole icon?

– Temani Afif
Jan 2 at 15:05

add a comment |

Color is fixed White color icon.png to blue color icon.png (html/css), but minimum (or maximum) how to do?

div {

 width: 50px;

 height: 50px;

 margin: 50px;

 padding: 50px;

 top: 50px;

 bottom: 50px;

 left: 50px;

 right: 50px;

 background-size: 50px;

 mask-size: 50px; /* not supported by Chrome */

 -webkit-mask-image: 50px; /* also not supported by Chrome */



 background-color: blue; /* select your want color */

 -webkit-mask-image: 

 url(https://image.flaticon.com/icons/png/512/54/54591.png);

 mask-image: url(https://image.flaticon.com/icons/png/512/54/54591.png);

 mask-repeat:no-repeat;

 -webkit-mask-repeat:no-repeat;

}



<div></div>

How to reduce size?

margin: 50px; padding: 50px;

left: 50px; right: 50px; top: 50px; bottom: 50px;

background-size: 50px;

mask-size: 50px;

no, not supported by Chrome

webkit-mask-size: 50px;

no, also not supported by Chrome

width: 50px; height: 50px;

and no

What to do?

asked Jan 2 at 14:53

Dani

Color is fixed White color icon.png to blue color icon.png (html/css), but minimum (or maximum) how to do?

div {

 width: 50px;

 height: 50px;

 margin: 50px;

 padding: 50px;

 top: 50px;

 bottom: 50px;

 left: 50px;

 right: 50px;

 background-size: 50px;

 mask-size: 50px; /* not supported by Chrome */

 -webkit-mask-image: 50px; /* also not supported by Chrome */



 background-color: blue; /* select your want color */

 -webkit-mask-image: 

 url(https://image.flaticon.com/icons/png/512/54/54591.png);

 mask-image: url(https://image.flaticon.com/icons/png/512/54/54591.png);

 mask-repeat:no-repeat;

 -webkit-mask-repeat:no-repeat;

}



<div></div>

How to reduce size?

margin: 50px; padding: 50px;

left: 50px; right: 50px; top: 50px; bottom: 50px;

background-size: 50px;

mask-size: 50px;

no, not supported by Chrome

webkit-mask-size: 50px;

no, also not supported by Chrome

width: 50px; height: 50px;

and no

What to do?

html css png jpeg gif

asked Jan 2 at 14:53

Dani

asked Jan 2 at 14:53

Dani

asked Jan 2 at 14:53

Dani

asked Jan 2 at 14:53

Dani

asked Jan 2 at 14:53

Dani

you want to reduce the size of the mask or the size of the whole icon?

– Temani Afif
Jan 2 at 15:05

add a comment |

you want to reduce the size of the mask or the size of the whole icon?

– Temani Afif
Jan 2 at 15:05

you want to reduce the size of the mask or the size of the whole icon?

– Temani Afif
Jan 2 at 15:05

add a comment |

1 Answer
1

active

oldest

votes

Instead of mask you can rely on mix-blend-mode then you can easily adjust the image as a simple background:

div.box {

  width: 50px;

  height: 50px;

  padding: 50px;

  background: url(https://image.flaticon.com/icons/png/512/54/54591.png) center/cover;

  position: relative;

  background-color: #fff;

}



div.box:before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: blue;

  mix-blend-mode: lighten;

}

<div class="box"></div>

You can also change the color of only a part of the image by adjusting the pseudo element:

div.box {

  width: 150px;

  height: 150px;

  background: url(https://image.flaticon.com/icons/png/512/54/54591.png) center/cover;

  position: relative;

  background-color: #fff;

}



div.box:before {

  content: "";

  position: absolute;

  top: 20%;

  left: 20%;

  right: 20%;

  bottom: 20%;

  background: blue;

  mix-blend-mode: lighten;

}

<div class="box"></div>

answered Jan 2 at 15:14

Temani Afif

80.5k94692

Thank you ... :)

– Dani
Jan 3 at 15:50

@Dani don't forget to accept the answer if it solves your issue

– Temani Afif
Jan 7 at 19:31

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54008461%2freduce-size-mask-image-can-you-help-me%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Instead of mask you can rely on mix-blend-mode then you can easily adjust the image as a simple background:

div.box {

  width: 50px;

  height: 50px;

  padding: 50px;

  background: url(https://image.flaticon.com/icons/png/512/54/54591.png) center/cover;

  position: relative;

  background-color: #fff;

}



div.box:before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: blue;

  mix-blend-mode: lighten;

}

<div class="box"></div>

You can also change the color of only a part of the image by adjusting the pseudo element:

div.box {

  width: 150px;

  height: 150px;

  background: url(https://image.flaticon.com/icons/png/512/54/54591.png) center/cover;

  position: relative;

  background-color: #fff;

}



div.box:before {

  content: "";

  position: absolute;

  top: 20%;

  left: 20%;

  right: 20%;

  bottom: 20%;

  background: blue;

  mix-blend-mode: lighten;

}

<div class="box"></div>

answered Jan 2 at 15:14

Temani Afif

80.5k94692

Thank you ... :)

– Dani
Jan 3 at 15:50

@Dani don't forget to accept the answer if it solves your issue

– Temani Afif
Jan 7 at 19:31

add a comment |

Instead of mask you can rely on mix-blend-mode then you can easily adjust the image as a simple background:

div.box {

  width: 50px;

  height: 50px;

  padding: 50px;

  background: url(https://image.flaticon.com/icons/png/512/54/54591.png) center/cover;

  position: relative;

  background-color: #fff;

}



div.box:before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: blue;

  mix-blend-mode: lighten;

}

<div class="box"></div>

You can also change the color of only a part of the image by adjusting the pseudo element:

div.box {

  width: 150px;

  height: 150px;

  background: url(https://image.flaticon.com/icons/png/512/54/54591.png) center/cover;

  position: relative;

  background-color: #fff;

}



div.box:before {

  content: "";

  position: absolute;

  top: 20%;

  left: 20%;

  right: 20%;

  bottom: 20%;

  background: blue;

  mix-blend-mode: lighten;

}

<div class="box"></div>

answered Jan 2 at 15:14

Temani Afif

80.5k94692

Thank you ... :)

– Dani
Jan 3 at 15:50

@Dani don't forget to accept the answer if it solves your issue

– Temani Afif
Jan 7 at 19:31

add a comment |

Instead of mask you can rely on mix-blend-mode then you can easily adjust the image as a simple background:

div.box {

  width: 50px;

  height: 50px;

  padding: 50px;

  background: url(https://image.flaticon.com/icons/png/512/54/54591.png) center/cover;

  position: relative;

  background-color: #fff;

}



div.box:before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: blue;

  mix-blend-mode: lighten;

}

<div class="box"></div>

You can also change the color of only a part of the image by adjusting the pseudo element:

div.box {

  width: 150px;

  height: 150px;

  background: url(https://image.flaticon.com/icons/png/512/54/54591.png) center/cover;

  position: relative;

  background-color: #fff;

}



div.box:before {

  content: "";

  position: absolute;

  top: 20%;

  left: 20%;

  right: 20%;

  bottom: 20%;

  background: blue;

  mix-blend-mode: lighten;

}

<div class="box"></div>

answered Jan 2 at 15:14

Temani Afif

80.5k94692

Instead of mask you can rely on mix-blend-mode then you can easily adjust the image as a simple background:

div.box {

  width: 50px;

  height: 50px;

  padding: 50px;

  background: url(https://image.flaticon.com/icons/png/512/54/54591.png) center/cover;

  position: relative;

  background-color: #fff;

}



div.box:before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: blue;

  mix-blend-mode: lighten;

}

<div class="box"></div>

You can also change the color of only a part of the image by adjusting the pseudo element:

div.box {

  width: 150px;

  height: 150px;

  background: url(https://image.flaticon.com/icons/png/512/54/54591.png) center/cover;

  position: relative;

  background-color: #fff;

}



div.box:before {

  content: "";

  position: absolute;

  top: 20%;

  left: 20%;

  right: 20%;

  bottom: 20%;

  background: blue;

  mix-blend-mode: lighten;

}

<div class="box"></div>

div.box {

  width: 50px;

  height: 50px;

  padding: 50px;

  background: url(https://image.flaticon.com/icons/png/512/54/54591.png) center/cover;

  position: relative;

  background-color: #fff;

}



div.box:before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: blue;

  mix-blend-mode: lighten;

}

<div class="box"></div>

div.box {

  width: 50px;

  height: 50px;

  padding: 50px;

  background: url(https://image.flaticon.com/icons/png/512/54/54591.png) center/cover;

  position: relative;

  background-color: #fff;

}



div.box:before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: blue;

  mix-blend-mode: lighten;

}

<div class="box"></div>

div.box {

  width: 150px;

  height: 150px;

  background: url(https://image.flaticon.com/icons/png/512/54/54591.png) center/cover;

  position: relative;

  background-color: #fff;

}



div.box:before {

  content: "";

  position: absolute;

  top: 20%;

  left: 20%;

  right: 20%;

  bottom: 20%;

  background: blue;

  mix-blend-mode: lighten;

}

<div class="box"></div>

div.box {

  width: 150px;

  height: 150px;

  background: url(https://image.flaticon.com/icons/png/512/54/54591.png) center/cover;

  position: relative;

  background-color: #fff;

}



div.box:before {

  content: "";

  position: absolute;

  top: 20%;

  left: 20%;

  right: 20%;

  bottom: 20%;

  background: blue;

  mix-blend-mode: lighten;

}

<div class="box"></div>

answered Jan 2 at 15:14

Temani Afif

80.5k94692

answered Jan 2 at 15:14

Temani Afif

80.5k94692

answered Jan 2 at 15:14

Temani Afif

80.5k94692

answered Jan 2 at 15:14

Temani Afif

80.5k94692

Thank you ... :)

– Dani
Jan 3 at 15:50

@Dani don't forget to accept the answer if it solves your issue

– Temani Afif
Jan 7 at 19:31

add a comment |

Thank you ... :)

– Dani
Jan 3 at 15:50

@Dani don't forget to accept the answer if it solves your issue

– Temani Afif
Jan 7 at 19:31

Thank you ... :)

– Dani
Jan 3 at 15:50

@Dani don't forget to accept the answer if it solves your issue

– Temani Afif
Jan 7 at 19:31

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu