जब नावबार में एक तत्व पर क्लिक किया जाता है, तो मैं चाहूंगा कि यह एक रंग पैरामीटर में रंगा हुआ हो जिसे मैं निर्दिष्ट कर सकता हूं। मैंने कुछ परीक्षण और त्रुटि की है और ओवरले में रंग जोड़ने के तरीके ढूंढे हैं, लेकिन वे पूरी छवि पर लागू होते हैं, जबकि मैं चाहता हूं कि वे केवल सफेद रंग पर लागू हों।

यानी फोटोशॉप में मल्टीप्ली फंक्शन। छवि में सफेद रंग निर्दिष्ट रंग से गुणा हो जाता है, जबकि पारदर्शी और काले रंग को नजरअंदाज कर दिया जाएगा।

.wrap {
  position:relative;
}

.wrap:before {
  content:"";
  position: absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background: rgba(255,0,0,0.5);
  z-index:999;
}
<div>
    <button class="button button-clear" style="margin: 5px;" routerLinkActive="active" [routerLink]="[route]">
        <div class="wrap">
            <img *ngIf="icon!==undefined" [src]=icon>
        </div>
        <a *ngIf="text!==undefined">{{text}}</a>
    </button>
</div>

Result

0
Torben Van Assche 28 अक्टूबर 2019, 15:44

1 उत्तर

सबसे बढ़िया उत्तर

एकाधिक फ़िल्टर का प्रयोग करें

body {
  background: lightblue;
}

img {
  width: 150px;
}

img:nth-of-type(2) {
  filter: 
  brightness(0.5) 
  sepia(1) 
  saturate(10000%)/* currently red */  ;
  }

img:nth-of-type(3) {
  filter: 
  brightness(0.5) 
  sepia(1) saturate(10000%)/* currently red */
  hue-rotate(120deg)/* now it's green */;
}
<img src="https://9group.co.uk/wp-content/uploads/2017/06/mobile-icon-white.png" alt="">

<img src="https://9group.co.uk/wp-content/uploads/2017/06/mobile-icon-white.png" alt="">

<img src="https://9group.co.uk/wp-content/uploads/2017/06/mobile-icon-white.png" alt="">
0
Paulie_D 28 अक्टूबर 2019, 13:19