15

黒いアイコンが含まれていても、アプリがCSSを使用してアイコンを別の色に変換するアプリをいくつか見ました。このプロセスを繰り返すことができないようです

これが私の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)
}

そして、htmlコードは次のようになります。

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

しかし、それは私のクロームブラウザでは機能しません。私は何かが足りないのですか？

追加の注意事項 私は最新のWebkitブラウザのみをサポートする必要があります。IEなどについて心配する必要はありません。

ここにコードを投稿しましたhttp://jsfiddle.net/ZnbF3/。初めてjsfiddleを使用しますが、うまくいけばうまくいきますか？そうでない場合は、上記で投稿したhtmlファイルとcssファイルをコピーしてください。この質問にcalendar2.pngを添付しています。

ここに画像の説明を入力してください

4

2 に答える 2

22

srcオレンジバージョンの上に黒バージョンを表示するために属性が使用されているため、コードが機能していません。この方法では、CSSを使用した場合にのみ目的の結果を得ることができます。

.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>​

そして、これがその実例です。

于 2012-05-29T17:13:15.843 に答える
2

画像に背景画像を使用してから、最初の画像内の別の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>

あなたのコードを使わないことを残念に思います、あなたがそれを投稿する前に私はあなたのawnserで働き始めました

于 2012-05-29T16:58:56.657 に答える