在反向颜色的简单方法上复制社会图标

Question

我正在制作一个响应式网站和顶部我有导航社交图标，我想将每个图标悬停在另一种颜色。在photoshop中进行编辑时，我不知道用什么技术将颜色放在一个简单的方法。问题是图标很小，所以当它的颜色需要花时间。我的网站上有5个图标：google，facebook，twitter，pinterest和rss。

Answer 1

您需要使用css :hover选择器更改图标。

尝试这样的事情：

<强> HTML

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

<强> CSS

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

a:hover {
 background-image: 'hover-image.png'
}

Answer 2

＆＃13;

＆＃13;

.pinterest-hover{
  background-image: url('http://bradsknutson.com/wp-content/themes/flat-ui/images/pinterest-hover.png');
}
.facebook-hover{
  background-image: url('http://bradsknutson.com/wp-content/themes/flat-ui/images/facebook-hover.png');
}
.twitter-hover {
  background-image: url('http://bradsknutson.com/wp-content/themes/flat-ui/images/twitter-hover.png');
}
.google-hover{
  background-image: url('http://bradsknutson.com/wp-content/themes/flat-ui/images/google-hover.png');
}

.social-slide {
	/*background-image: url('http://bradsknutson.com/wp-content/themes/flat-ui/images/google-hover.png');*/
	height: 48px;
	width: 48px;
	margin: 10px;
	float: left;
    border-radius:50%;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.social-slide:hover {
	background-position: 0px -48px;
}

＆＃13;

<h2>Slide rollover animation</h2>
<div class="twitter-hover social-slide"></div>
<div class="facebook-hover social-slide"></div>
<div class="google-hover social-slide"></div>
<div class="pinterest-hover social-slide"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

另一种方法是只使用1个特殊图像和控制颜色与css：

＆＃13;

＆＃13;

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

＆＃13;

<div class="facebook"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

如果您只想在几秒钟内使用照片商店工具更改为图标的背面颜色，则意味着您可以使用魔术选择工具选择白色字母，您可以使用图像变换选择并轻松改变颜色。

另一种方法是使用图层，如果你想改变图像的不同颜色，将白色字母和背景分开为两层，并改变不同的背景颜色，只需拖放字母即可背景