Mit CSS zu geben, ein Schwarzes Symbol eine andere Farbe

Sah ich einige apps, bei denen, obwohl ein Schwarzes Symbol war enthalten, einige, wie die app verwendet CSS zu konvertieren, das Symbol in einer anderen Farbe. Ich kann nicht scheinen, um wiederholen Sie diesen Vorgang,

Hier ist mein Rücken.css-Datei:

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

Und der html-code sieht wie folgt aus:

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

Aber es funktioniert nicht in meinem chrome-browser. Bin ich etwas fehlt?

Zusätzliche Hinweise ich nur unterstützen müssen moderne webkit-Browser. Brauchen nicht zu sorgen über IE oder sonst was.

Ich habe meine code hier http://jsfiddle.net/ZnbF3/ . Ersten mal mit jsfiddle, hoffentlich funktioniert es? Wenn nicht, kopieren Sie einfach die html-Datei und css-Datei, die ich bereits oben gepostet. Ich habe die calendar2.png im Anhang zu dieser Frage.

Mit CSS zu geben, ein Schwarzes Symbol eine andere Farbe

InformationsquelleAutor der Frage John | 2012-05-29

  1. 19

    Dein code nicht funktioniert, weil die src Attribut wird verwendet, um zu zeigen, bis die schwarze version von der orange-version. Sie werden in der Lage sein, das gewünschte Ergebnis zu erhalten, nur mit CSS, auf diese Weise:

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

    Hier ist die geänderte HTML-snippet:

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

    Und hier ist ein Beispiel arbeiten.

    InformationsquelleAutor der Antwort Erick Petrucelli

  2. 2

    Versuchen, verwenden Sie ein Hintergrundbild für das Bild, dann verwenden Sie ein weiteres div in das erste anwenden der alpha

        <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 für die nicht Ihren code verwenden, fing ich an zu arbeiten in Ihrem awnser, bevor du es gepostet hast

    InformationsquelleAutor der Antwort Gaddiel Sadoc Peralta

Schreibe einen Kommentar