単純な図形を白で表示する透明なPNGがある場合、CSSを使ってこの図形の色を変えることは可能でしょうか?ある種のオーバーレイか何か?
-webkit-filter
と filter
:のフィルターを使用できます。
フィルターはブラウザーにとって比較的新しいですが、次のCanIUseテーブルに従ってブラウザーの90%以上でサポートされています:https://caniuse.com/#feat=css-filters。
画像がグレースケール、セピアなどに変更できます(例を見てください)。
これで、フィルターを使用してPNGファイルの色を変更できます。。
<。!-スニペットを開始:js hide:false console:false babel:false -->。
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="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">
<。!-終了スニペット-->。
ソース。
hex color 値を挿入するこの優れたコードペンの例を見つけました。この色をpngに適用するために必要なフィルターを返します。
CSSフィルタージェネレーターを黒からターゲットヘクス色に変換。
たとえば、次の色にするにはpngが必要でした#1a9790 。
次に、次のフィルターをpngに適用する必要があります。
filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
http://css-tricks.com/examples/IconFont/。
EDIT: 私は最新のプロジェクトで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>
EDIT 2:
githubも独自のアイコンフォントを使っていることがわかった:オクチコン。 無料でダウンロードできます。また、How to create your very own icon fontsについてのヒントもあります。
SVGフィルターを使用してこれを行うことができました。 ソース画像の色と変更したい色を乗算したフィルターを作成できます。 下のコードスニペットでは、 flood-color は画像の色を変更したい色です(この場合は赤です)。)feCompositeは、色の処理方法をフィルターに通知します。 算術を伴うfeCompositeの式は(k1 i1 i2 + k2 i1 + k3 i2 + k4)です。ここで、i1とi2はそれに応じてin / in2の入力色です。 したがって、k1 = 1のみを指定すると、i1 * i2のみを実行することになります。つまり、両方の入力色を乗算します。
注:これはインラインSVGを使用しているため、HTML5でのみ機能します。しかし、SVGを別のファイルに配置することで、古いブラウザでこれを機能させることができると思います。 私はまだそのアプローチを試していません。
これがスニペットです。 <。!-スニペットを開始:js hide:false -->。
<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>
<。!-終了スニペット-->。
はい :)
Surfin' Safari - Blog Archive » CSS Masks
WebKitがCSSのアルファマスクをサポートしました。マスクは、最終的な表示でボックスの一部を切り取るために使用できるパターンで、ボックスの内容をオーバーレイすることができます。言い換えると、画像のアルファに基づいて複雑な形状にクリップできます。
[...] gt;私たちは、ウェブデザイナーにこれらのマスクとその適用方法について多くの制御を提供するために、新しいプロパティを導入しました。新しいプロパティは、すでに存在するbackgroundプロパティとborder-imageプロパティに類似しています。
webkit-mask (background) webkit-mask-attachment (background-attachment)
-webkit-mask-clip(背景クリップ) -webkit-mask-origin(背景-オリジン) -webkit-mask-image(背景画像) -webkit-mask-repeat (background-repeat) -webkit-mask-composite(背景コンポジット) -webkit-mask-box-image (border-image)
ほとんどのブラウザでは、フィルタを使用できます。
-< img>
要素と他の要素の背景画像の両方。
-CSSに静的に設定するか、JavaScriptを使用して動的に設定します。
以下のデモを参照してください。
-------。
< img>
要素。この手法を < img>
要素に適用できます。
<。!-スニペットを開始:js hide:false -->。
<img id="original" src="http://i.stack.imgur.com/rfar2.jpg" />
<img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />
#original, #changed {
width: 45%;
padding: 2.5%;
float: left;
}
#changed {
-webkit-filter : hue-rotate(180deg);
filter : hue-rotate(180deg);
}
<。!-終了スニペット-->。
この手法を背景画像に適用できます。
<。!-スニペットを開始:js hide:false -->。
<div id="original"></div>
<div id="changed"></div>
#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);
}
<。!-終了スニペット-->。
JavaScriptを使用して、実行時にフィルターを設定できます。
<。!-スニペットを開始:js hide:false -->。
<div id="original"></div>
<div id="changed"></div>
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%;
}
<。!-終了スニペット-->。
これには、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/chrscbls/pen/bwAXZO。
特定の色が必要だったので、フィルターが機能しませんでした。
代わりに、CSSの複数の背景画像と線形 ⁇ 配関数(画像自体を作成する)を利用してdivを作成しました。 オーバーレイブレンドモードを使用すると、実際の画像が、目的の色(ここでは#BADA55)を含む生成された「グラデーション」画像とブレンドされます。
<。!-スニペットを開始:js hide:false console:true babel:false -->。
.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>
<。!-終了スニペット-->。
これに対する解決策を探していたので答えました。
@chrscblsの回答のペンは、白または黒の背景があればうまく機能しますが、私のものはそうではありませんでした。 Aslo、画像はng-repeatで生成されたので、cssにURLを含めることができず、imgタグで:: afterを使用できません。
それで、私は周りの仕事を考え出し、彼らがここでつまずきすぎると人々を助けるかもしれないと思いました。
だから私がしたことは、3つの主要な違いでほとんど同じです:
-URLが私のimgタグにあるので、それを(そしてラベル)別のdivに入れます。 -「ミックスブレンドモード」は、「複数」または「画面」ではなく「差」に設定されます。 -私はまったく同じ値で:: 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: "";
}
アイコンが1つしか必要ない場合は、フォントセット全体は必要ありません。さらに、個々の要素としてより「クリーン」になっているように感じます。 そのため、この目的のために、HTML5ではSVGをドキュメントフローの内側に直接配置できます。 次に、.CSSスタイルシートでクラスを定義し、 fill
プロパティを使用してその背景色にアクセスできます。
作業フィドル:
。この例では、動作を説明するために :hover
を使用したことに注意してください。 「通常の」状態の色を変更する場合は、疑似クラスを削除する必要があります。
<。!-スニペットを開始:js hide:false console:true babel:false -->。
body{
background: #333 url(/images/classy_fabric.png);
width: 430px;
margin: 0 auto;
padding: 30px;
}
.preview{
background: #ccc;
width: 415px;
height: 430px;
border: solid 10px #fff;
}
input[type='radio'] {
-webkit-appearance: none;
-moz-appearance: none;
width: 25px;
height: 25px;
margin: 5px 0 5px 5px;
background-size: 225px 70px;
position: relative;
float: left;
display: inline;
top: 0;
border-radius: 3px;
z-index: 99999;
cursor: pointer;
box-shadow: 1px 1px 1px #000;
}
input[type='radio']:hover{
-webkit-filter: opacity(.4);
filter: opacity(.4);
}
.red{
background: red;
}
.red:checked{
background: linear-gradient(brown, red)
}
.green{
background: green;
}
.green:checked{
background: linear-gradient(green, lime);
}
.yellow{
background: yellow;
}
.yellow:checked{
background: linear-gradient(orange, yellow);
}
.purple{
background: purple;
}
.pink{
background: pink;
}
.purple:checked{
background: linear-gradient(purple, violet);
}
.red:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
filter: opacity(.5) drop-shadow(0 0 0 red);
}
.green:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
filter: opacity(.5) drop-shadow(0 0 0 green);
}
.yellow:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
filter: opacity(.5) drop-shadow(0 0 0 yellow);
}
.purple:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 purple);
filter: opacity(.5) drop-shadow(0 0 0 purple);
}
.pink:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 pink);
filter: opacity(.5) drop-shadow(0 0 0 pink);
}
img{
width: 394px;
height: 375px;
position: relative;
}
.label{
width: 150px;
height: 75px;
position: absolute;
top: 170px;
margin-left: 130px;
}
::selection{
background: #000;
}
<div class="preview">
<input class='red' name='color' type='radio' />
<input class='green' name='color' type='radio' />
<input class='pink' name='color' type='radio' />
<input checked class='yellow' name='color' type='radio' />
<input class='purple' name='color' type='radio' />
<img src="https://i.stack.imgur.com/bd7VJ.png"/>
</div>
<。!-終了スニペット-->。