Uso de CSS para dar un icono negro de otro color

Vi algunas aplicaciones en las que, aunque se incluyera un icono negro, la aplicación utilizaba CSS para convertir el icono en un color diferente. Me parece que no puede repetir este procesoUso de CSS para dar un icono negro de otro color

Aquí está mi archivo 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)}

Y el código HTML es el siguiente:

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

Pero no funciona en mi navegador Chrome . ¿Me estoy perdiendo de algo?

Notas adicionales Solo necesito compatibilidad con navegadores webkit modernos. No necesita preocuparse por IE o cualquier otra cosa.

He publicado mi código aquí http://jsfiddle.net/ZnbF3/. ¿Es la primera vez que usa jsfiddle, con suerte funciona? Si no, solo copie el archivo html y el archivo css que ya publiqué arriba. Tengo el calendario2.png adjunto a esta pregunta.

enter image description here

Fuente

2012-05-29 John

¿has buscado esto? https://developer.mozilla.org/en/CSS/-webkit-mask-image, y esto http://en.wikipedia.org/wiki/Image_mask#Image_masks – jperelli

Deberías tener comillas alrededor de 'icon.png' en el css. –

Hola chicos, agregué mi código real a esta pregunta. ¿Hay algún problema con mi código? – John

Su código no funciona porque el atributo src se utiliza para mostrar la versión en negro sobre la versión naranja. Usted será capaz de obtener el resultado deseado solamente con CSS, de esta manera:

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

Aquí es el fragmento de HTML cambiado:

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

Y aquí es un working sample de ella.

Fuente

2012-05-29 17:13:15

funciona muy bien: gracias –

imagen Intento uso del fondo para su imagen, a continuación, utilizar otro div dentro de la primera en aplicar el 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 por no usar su código, empecé a trabajar en su awnser antes de publicarlo

Fuente

2012-05-29 16:58:56

Buena idea sobre esa opacidad – budiantoip

Uso de CSS para dar un icono negro de otro color

Respuesta

Cuestiones relacionadas