0

私はレスポンシブ Web サイトを作成しており、トップにはナビゲーション ソーシャル アイコンがあり、各アイコンを別の色に移動したいと考えています。フォトショップでの編集中に、色を簡単に配置するテクニックがわかりません。問題は、アイコンが小さいため、色を付けるのに時間がかかることです。私のウェブサイトには、google、facebook、twitter、pinterest、rss の 5 つのアイコンがあります。

画像を見る

4

4 に答える 4

0

もう 1 つの方法は、特別な画像を 1 つだけ使用し、CSS で色を制御することです。

.facebook{
	width: 48px;
	height: 48px;
	border-radius: 24px;
	background: #787878 url('http://oi59.tinypic.com/ja9b39.jpg') no-repeat;
}
.facebook:hover{
	background-color:#DB4A39;
}
<div class="facebook"></div>

于 2014-11-13T15:18:27.123 に答える
0

:hovercssセレクターを使用してアイコンを変更する必要があります。

次のようなことを試してください：

HTML

<a class="icon" href="#"></a>

CSS

a{
  background-image: 'image.png'
  width: 32px;
}

a:hover {
 background-image: 'hover-image.png'
}
于 2014-11-13T02:34:44.500 に答える
0

数秒以内にフォトショップツールのみを使用してアイコンの背景色に変更したい場合は、魔法の選択ツールを使用して白い文字を選択し、画像変換選択を使用して元に戻すことができます簡単に着色。

もう1つの方法はレイヤーを使用することです.画像の異なる色を変更したい場合は、白い文字と背景を2つのレイヤーとして分離し、背景の色を変更し、文字を背景にドラッグアンドドロップするだけです.

于 2015-03-22T10:26:56.007 に答える