0

私は自分の会社のテンプレートを作成しています。このテンプレートは、さまざまなクライアントサイトで使用され、すべて色が異なります。このテンプレートのアイコンを現在黒（または白）で作成しましたが、cssを介してこれらのアイコンの色を制御できるようにしたいと考えています。それらは1つの単純な色であり、フォトショップでは、カラーオーバーレイのブレンドオプションを実行して1つの色を選択すると、見栄えが良くなります。これはcssで行うことができるので、誰かが将来のクライアントのためにこのテンプレートを編集しているときに、フォトショップのすべてのアイコンを毎回編集する代わりに、cssのアイコンの色を制御できますか？

4

9 に答える 9

1

CSS でロゴの色を変更することは可能ですが、問題を解決することはできません。変更可能なロゴを作成するには、ロゴがある部分の透明度と (Web ページの) 背景色をネガティブ スペースに持つ PNG を作成します。次に、背景色として必要なロゴの色を持つ P または div の上に配置します。

問題は、柔軟なロゴの色を柔軟性のない「背景」色に交換したところです。

すべての Web サイトに付属する「パッケージ」の一部として、白と黒の両方の色のロゴを含めることをお勧めします。CSSで必要なものを必要な場所で呼び出すだけです。

于 2012-11-02T20:30:24.327 に答える
0

あなたのアイコンがcssで作成できる形であれば、それは機能する可能性がありますが、あなたが話していることを誰かがやっているという話は聞いたことがありません。

于 2012-07-31T17:00:39.133 に答える
0

これは画像で行うことができますが（背景色が一貫している限り）、ボックスの外側を少し考える必要があります。Photoshop（または同様のもの）でアイコンの画像ファイルを開きます。「アイコン」部分（つまり、現在黒であるビット）が透明になり、背景（つまり、アイコンが表すものではないビット）が白（またはサイトの背景色が何であれ）で塗りつぶされるように編集します。 ）。基本的に、画像の「極性を反転」しました。画像をWebページに配置し、CSSを使用して画像を指定しますbackground-color。アイコンはその色で表示されます。編集：このようなもの：http：//coding.smashingmagazine.com/2010/10/31/transparent-css-sprites/

[潜在的に]はるかに簡単なアプローチは、 http：//pictos.cc/のようなアイコンフォントを使用することです。これは実際には単なるテキストなので、通常どおりCSSで色を付けることができます。

于 2012-07-31T17:25:00.037 に答える
0

アイコン画像をフォントにすると、CSSを介してサイズと色の両方を完全に制御できます。非常に人気のあるFont- TwitterBootstrapを補完するように設計されたAwesomeフォントをチェックしてください。

私はフォントの専門家ではありませんが、このアプローチが適切と思われる場合は、次のようにします。

  • アイコンからベクターグラフィックを作成する
  • FontLabStudioなどのフォントエディタにそれらをロードします
  • 新しいフォントをお気に入りのWebアプリケーションに追加します。このためのガイドが必要な場合、FontSquirrel.comは、無料フォントのライブラリを含めるための優れた@font-faceマークアップを生成します。
于 2012-12-07T14:11:21.053 に答える
0

私の知る限り、これは Firefox と Chrome で実行でき、うまく機能します。以下の例。 http://demosthenes.info/blog/532/Convert-Images-To-Black-And-White-With-CSS

img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
于 2013-01-16T00:20:08.390 に答える
0

これは、CSS 疑似要素と半透明オーバーレイを使用して行うことができます。こちらの手順に従ってください: http://www.impressivewebs.com/image-tint-blend-css/

ベクターロゴがある場合は、SVG ロゴを使用すると、これをさらに簡単に行うことができます (SVG の色を変更することにより)。

于 2012-11-11T01:54:23.360 に答える
0

最良/最も簡単な答えは、SVG を使用することです。ロゴは、名刺からビルボードまで詳細を失うことなく拡大縮小できるように、最初はベクトル形式にする必要があります。

SVG の「画像」は形状に基づいています。変更したい形状に名前を付けてから、CSS でアドレス指定して色を変更します。

この記事: http://css-tricks.com/using-svg/

この例: http://codepen.io/chriscoyier/pen/evcBu

これを達成する方法を説明し、他の可能性を示す素晴らしい仕事をしてください。

SVG の少なくとも基本は現在広くサポートされています。ie8 はそれを妨げている唯一のブラウザです。それでも、SVG をオンザフライで画像としてレンダリングすることでこれを回避する方法があります。

于 2013-06-19T00:20:21.123 に答える
0

css を使用してアイコンの色を変更することはできません。あなたはそれを形作ることができます、あなたは透明度、不透明度などを与えることができます

于 2012-07-31T17:03:22.353 に答える
0

CSS経由ではできません。Canvas のようないくつかの動的テクノロジーを使用できますが、それは良い方法ではありません。希望の色のアイコン セットを作成するツールを作成したいと思います。PHPでそれを行うことができます（phpGDまたはImageMagickはここで同様の問題の例です）。

于 2012-07-31T17:22:43.277 に答える