Używanie CSS do nadania czarnej ikonie innego koloru

Widziałem aplikacje, w których mimo że czarna ikona była dołączona, niektóre z nich używały CSS do konwersji ikony na inny kolor. I nie wydaje się, aby powtórzyć ten procesUżywanie CSS do nadania czarnej ikonie innego koloru

Oto mój plik 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)}

I kod html wygląda następująco:

<!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>

Ale to nie działa w przeglądarce chrome . Czy coś mi brakuje?

Dodatkowe uwagi Potrzebuję tylko obsługi nowoczesnych przeglądarek Webkit. Nie musisz się martwić o IE lub cokolwiek innego.

Wysłałem swój kod tutaj http://jsfiddle.net/ZnbF3/. Pierwszy raz używając jsfiddle, mam nadzieję, że działa? Jeśli nie, po prostu skopiuj plik html i plik css już opublikowany powyżej. Mam dołączone kalendarzyk.png do tego pytania.

enter image description here

Źródło

2012-05-29 John

Podniosłeś na to uwagę? https://developer.mozilla.org/en/CSS/-webkit-mask-image, a to http://en.wikipedia.org/wiki/Image_mask#Image_masks – jperelli

Powinieneś mieć cytaty wokół "icon.png" w css. –

Witajcie, dodałem mój prawdziwy kod do tego pytania. Czy coś jest nie tak z moim kodem? – John

Twój kod nie działa, ponieważ atrybut src jest używany do wyświetlenia czarnej wersji na pomarańczowej wersji. Będziesz w stanie uzyskać pożądany efekt tylko z CSS, w ten sposób:

.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'); }

Oto zmieniony kod HTML:

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

A oto working sample niego.

Źródło

2012-05-29 17:13:15

działa świetnie: dzięki –

próbie użycia tła dla obrazu, a następnie użyć innego div wewnątrz pierwszego zastosowania alfa

<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 za nie przy użyciu kodu, zacząłem pracować w awnser przed opublikowaniem:

Źródło

2012-05-29 16:58:56

Dobry pomysł na to nieprzezroczystość – budiantoip

Używanie CSS do nadania czarnej ikonie innego koloru

Odpowiedz

Powiązane problemy