एक काला आइकन देने के लिए सीएसएस का उपयोग करना एक और रंग

मैंने कुछ ऐप्स देखा जहां एक काला आइकन शामिल था, कुछ ऐप ने आइकन को एक अलग रंग में बदलने के लिए सीएसएस का उपयोग कैसे किया। मैं इस प्रक्रिया को दोहराने नहीं कर पा रहेएक काला आइकन देने के लिए सीएसएस का उपयोग करना एक और रंग

यहाँ मेरी back.css फ़ाइल है:

.dashboard-buttons a {width: 80px; height: 80px; border: 1px solid #ccc; margin: 0px 5px; display:inline-block;border-radius: 10px; 
    background:white; text-decoration:none; 
    -moz-box-shadow: inset 0 0 15px rgba(0,0,0, 0.25); 
    -webkit-box-shadow: inset 0 0 15px rgba(0,0,0, 0.25); 
} 
.dashboard-buttons a:hover {text-decoration:underline;} 
.dashboard-buttons span, .dashboard-buttons img {display:inline; font-size: 12px; font-weight:bold;} 

.dashboard-buttons .sessions img { background-color:#C60; } 
.dashboard-buttons .sessions img {-webkit-mask-image:url(mobile/images/calendar2.png)}

और एचटीएमएल कोड इस तरह दिखता है:

<!DOCTYPE html> 
<html lang="en"> 
     <head> 
       <link rel="stylesheet" type="text/css" href="back.css" /> 
       <title>West</title> 
       </head> 
       <body> 
    <div class="dashboard-buttons">  <a href="sessions.php" class="sessions"> 
      <img src="mobile/images/calendar2.png"> 
      <span>Sessions</span> 
     </a> 
    </div> 


</body> 
</html>

लेकिन यह मेरी क्रोम ब्राउज़र में काम नहीं कर रहा । क्या मैं कुछ भूल रहा हूँ?

अतिरिक्त नोट्स मुझे केवल आधुनिक वेबकिट ब्राउज़र का समर्थन करने की आवश्यकता है। आईई या किसी और चीज के बारे में चिंता करने की ज़रूरत नहीं है।

मैंने अपना कोड यहां http://jsfiddle.net/ZnbF3/ पोस्ट किया है। पहली बार jsfiddle का उपयोग कर, उम्मीद है कि यह काम कर रहा है? यदि नहीं, तो बस पहले से पोस्ट की गई HTML फ़ाइल और सीएसएस फ़ाइल की प्रतिलिपि बनाएँ। मेरे पास कैलेंडर 2.png इस प्रश्न से जुड़ा हुआ है।

enter image description here

स्रोत

2012-05-29 John

क्या आपने इसके लिए देखा था? https://developer.mozilla.org/en/CSS/-webkit-mask-image, और यह http://en.wikipedia.org/wiki/Image_mask#Image_masks – jperelli

आपके पास 'icon.png' के आस-पास उद्धरण होना चाहिए सीएसएस –

हे दोस्तों, मैंने इस सवाल के लिए अपना असली कोड जोड़ा। क्या मेरे कोड में कुछ गड़बड़ है? – John

आपका कोड काम नहीं कर रहा है क्योंकि src विशेषता नारंगी संस्करण के शीर्ष पर काले संस्करण को दिखाने के लिए उपयोग की जा रही है।

.dashboard-buttons .sessions .img { width: 60px; height: 60px; background-color: #C60; } 
.dashboard-buttons .sessions .img { -webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png'); }

यहाँ बदली हुई HTML स्निपेट है:

<div class="dashboard-buttons"> 
    <a href="sessions.php" class="sessions"> 
     <div class="img"></div> 
     <span>Sessions</span> 
    </a> 
</div>

और यहाँ इसके बारे में एक working sample है तुम्हें पता है, इस तरह से केवल सीएसएस के साथ वांछित परिणाम प्राप्त करने में सक्षम हो जाएगा।

स्रोत

2012-05-29 17:13:15

बहुत अच्छा काम करता है: धन्यवाद –

कोशिश उपयोग पृष्ठभूमि छवि अपनी छवि के लिए है, तो पहले एक के अंदर एक और div का उपयोग अपने कोड का उपयोग नहीं करने के लिए अल्फा

<style type="text/css"> 
     #image{background-image:url(/img/2012-05-24_1834.png);width:400px;height:400px;} 
     #image #image_mask{background-color:red;width:400px;height:400px;opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */} 
    </style> 

</head> 


<body> 

     <div id="image"> 
       <div id="image_mask"></div> 
     </div> 
</body>

sry लागू करने के लिए, मैं अपने awnser में काम शुरू कर दिया इससे पहले कि आप इसे पोस्ट करें

स्रोत

2012-05-29 16:58:56

उस अस्पष्टता पर अच्छा विचार – budiantoip

एक काला आइकन देने के लिए सीएसएस का उपयोग करना एक और रंग

उत्तर

संबंधित मुद्दे