web-dev-qa-db-ja.com

CSSでPNG画像の色を変えますか？

透明なPNGが白で単純な形を表示しているとすると、CSSを通してこれをどうにかして色を変えることは可能ですか？ある種のオーバーレイかどうか

cssimagecolorspngoverlay
374
Wesley

-webkit-filterとfilterでフィルタを使うことができます：フィルタはブラウザにとって非常に新しいもので、非常に最近のブラウザでのみサポートされています。画像をグレースケール、セピア色などに変更できます（例を見てください）。

フィルタを使ってPNGファイルの色を変更できるようになりました。 

body {
    background-color:#03030a;
    min-width: 800px;
    min-height: 400px
}
img {
    width:20%;
    float:left; 
     margin:0;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }
<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="original">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="saturate" class="saturate">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="contrast" class="contrast">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="brightness" class="brightness">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="blur" class="blur">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="invert" class="invert">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="sepia" class="sepia">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="opacity" class="rss opacity">

出典

477
РАВИ

アイコンフォントを見てみるとよいでしょう。 http://css-tricks.com/examples/IconFont/

編集：私は私の最新のプロジェクトで Font-Awesome を使用しています。あなたもそれをブートストラップすることができます。これをあなたの<head>に入れるだけです：

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">

<!-- And if you want to support IE7, add this aswell -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">

そして先に進み、次のようなアイコンリンクを追加します。

<a class="icon-thumbs-up"></a>

これが フルチートシートです

--edit--

Font-Awesomeは新バージョンでは異なるクラス名を使用しています。おそらくこれはCSSファイルを劇的に小さくし、あいまいなCSSクラスを避けるためです。だから今あなたが使用する必要があります：

<a class="fa fa-thumbs-up"></a>

編集2：

Githubは独自のアイコンフォントも使用しています。 Octicons 無料でダウンロードできます。彼らはまた についてのいくつかのヒントを持っています - あなた自身のアイコンフォントを作る方法 。

55
Jules Colle

私はあなたがあなたの hex color valueを挿入するというこのすばらしいcodepenの例を見つけました、そしてそれはpngにこの色を適用するために必要なフィルタを返します

黒からターゲットの16進数カラーに変換するCSSフィルタジェネレータ

例えば、私は私のPNGは次の色を持っている必要がありました ＃1a9790

その後、あなたはあなたに次のフィルタを適用する必要がありますpng

filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
28
Fadi Abo Msalam

Imgタグは他のものと同様にbackgroundプロパティを持ちます。ステンシルのように透明な形の白いPNGがある場合は、次のようにします。

<img src= 'stencil.png' style= 'background-color: red'>
26
Kirill G

SVGフィルタを使ってこれを行うことができました。元の画像の色と変更したい色を掛け合わせるフィルタを書くことができます。以下のコードスニペットでは、 flood-color がイメージカラーを変更するカラーです（この場合はRedです）。feCompositeは、カラーの処理方法をフィルタに指示します。算術とのfeCompositeの公式は（k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4）です。ここで、i1とi2はそれに応じてin/in2の入力色です。したがって、k1 = 1だけを指定すると、i1 * i2だけが実行されることになります。つまり、両方の入力色を乗算することになります。

注：これはインラインSVGを使用しているため、HTML 5でのみ機能します。しかし私はあなたがSVGを別のファイルに入れることによってあなたがこれをより古いブラウザで動作させることができるかもしれないと思います。私はまだその方法を試していません。

これがスニペットです：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask1">
      <feFlood flood-color="#ff0000" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask1)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask2">
      <feFlood flood-color="#00ff00" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask2)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask3">
      <feFlood flood-color="#0000ff" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask3)" />
</svg>
23
Vasan Jiaramaneetwesin

はい ：）

Surfin 'Safari - ブログのアーカイブ»CSSマスク

WebKitはCSSのアルファマスクをサポートするようになりました。マスクを使用すると、ボックスの内容を最終表示でそのボックスの一部をノックアウトするために使用できるパターンでオーバーレイできます。つまり、画像のアルファを基にして複雑な形状に切り取ることができます。
[...]
これらのマスクとその適用方法について、Webデザイナーに多くの制御を提供するために、新しいプロパティを導入しました。新しいプロパティは、既存のbackgroundおよびborder-imageプロパティに似ています。

-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-Origin (background-Origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)
20
benhowdle89

ほとんどのブラウザ では、フィルタを使用できます。

  • <img>要素と他の要素の背景画像の両方

  • cSSで静的に設定するか、JavaScriptを使用して動的に設定します。

下記のデモを参照してください。

<img>要素

このテクニックを<img>要素に適用することができます。

#original, #changed {
    width: 45%;
    padding: 2.5%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}
<img id="original" src="http://i.stack.imgur.com/rfar2.jpg" />

<img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />

背景画像

このテクニックを背景画像に適用することができます。

#original, #changed {
    background: url('http://i.stack.imgur.com/kaKzj.jpg');
    background-size: cover;
    width: 30%;
    margin: 0 10% 0 10%;
    padding-bottom: 28%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}
<div id="original"></div>

<div id="changed"></div>

JavaScript

JavaScriptを使用して実行時にフィルタを設定できます。

var element = document.getElementById("changed");
var filter = 'hue-rotate(120deg) saturate(2.4)';
element.style['-webkit-filter'] = filter;
element.style['filter'] = filter;
#original, #changed {
    margin: 0 10%;
    width: 30%;
    float: left;
    background: url('http://i.stack.imgur.com/856IQ.png');
    background-size: cover;
    padding-bottom: 25%;
}
<div id="original"></div>

<div id="changed"></div>
15
John Slegers

私はこれに対する解決策があると思います。それはa）あなたが5年前に探していたものと全く同じであり、そしてb）ここの他のコードオプションよりも少し単純なことです。

白いpng（透明な背景の上の白いアイコンなど）では、:: afterセレクタを追加して色を変えることができます。

.icon {
    background: url(img/icon.png); /* Your icon */
    position: relative; /* Allows an absolute positioned psuedo element */
}

.icon::after{
    position: absolute; /* Positions psuedo element relative to .icon */
    width: 100%; /* Same dimensions as .icon */
    height: 100%;
    content: ""; /* Allows psuedo element to show */
    background: #EC008C; /* The color you want the icon to change to */
    mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
}

このコードを参照してください（ホバーにカラースワップを適用します）： http://codepen.io/chrscblls/pen/bwAXZO

14
chrscblls

私は特定の色が必要だったので、フィルターは私のために働きませんでした。

代わりに、CSSの複数の背景画像と線形勾配関数（画像自体を作成する）を利用してdivを作成しました。オーバーレイブレンドモードを使用すると、実際の画像は、希望の色を含む生成された「グラデーション」画像とブレンドされます（ここでは、＃BADA55）。

.colored-image {
        background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png");
        background-blend-mode: overlay;
        background-size: contain;
        width: 200px;
        height: 200px;        
    }
<div class="colored-image"></div>
7
pyre

グーグル中にこれを見つけた、私は私のために最もよく働くことがわかった...

HTML

<div class="img"></div>

CSS

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

http://jsfiddle.net/a63b0exm/ /

5
Muthukumar Anbalagan

私にとって最も簡単な1行

filter: opacity(0.5) drop-shadow(0 0 0 blue);

不透明度を0から1の範囲で調整して、色を明るくしたり暗くしたりできます。

3
Rehmat

アイコンが1つだけ必要な場合は、フォントセット全体を使用する必要はありません。さらに、個々の要素としてはもっと「きれい」であると感じます。そのため、この目的のために、HTML 5では、ドキュメントフローの中にSVGを直接配置できます。それから、.CSSスタイルシートでクラスを定義し、fillプロパティでその背景色にアクセスできます。

作業フィドル： http://jsfiddle.net/qmsj0ez1/ /

この例では、動作を説明するために:hoverを使用しました。単に「通常の」状態の色を変更したい場合は、疑似クラスを削除する必要があります。

3
Pere

私はこれに対する解決策を探していたので答える。

あなたが白または黒の背景を持っている場合@chrscblls答えのペンはうまく機能しますが、私のものはそうではありませんでした。また、画像はng-repeatで生成されたので、私は自分のCSSにそれらのURLを含めることができず、imgタグに:: afterを使用することはできません。

それで、私は回避策を考え出して、もし彼らがここでつまずくならばそれが人々を助けるかもしれないと考えました。

だから私がやったことは3つの主な違いを除いてほぼ同じです：

  • uRLが私のimgタグの中にあるので、それを（そしてラベルを）別のdivに入れます。
  • 'mix-blend-mode'は 'multiply'や 'screen'の代わりに 'difference'に設定されます。
  • 私は:: beforeが正確に同じ値を持つように追加したので、:: afterは:: beforeによって作られた '差'の '差'をし、それをキャンセルしました。

黒から白、または白から黒に変更するには、背景色を白にする必要があります。黒から色まで、あなたはどんな色でも選ぶことができます。白から色まで、あなたはあなたが望むものの反対の色を選ぶ必要があるでしょう。

.divClass{
   position: relative;
   width: 100%;
   height: 100%;
   text-align: left;
}
.divClass:hover::after, .divClass:hover::before{
   position: absolute;
   width: 100%;
   height: 100%;
   background: #FFF;
   mix-blend-mode: difference;
   content: "";
}

https://codepen.io/spaceplant/pen/oZyMYG

3
Salix

文字通り色を変えるには、何かが起こったときにあなたが選んだ-webkit-filterを呼び出す-webkit-filterを使ってCSSトランジションを組み込むことができます。例えば：

img {
    -webkit-filter:grayscale(0%);
    transition: -webkit-filter .3s linear;
    }
img:hover 
    {
    -webkit-filter:grayscale(75%);
    }
0
beta208