0

我正在制作一个响应式网站，顶部有导航社交图标，我想将每个图标悬停在另一种颜色上。在 Photoshop 中编辑期间，我不知道用什么技术可以轻松地添加颜色。问题是图标很小，所以在涂上颜色时需要时间。我的网站上有 5 个图标：google、facebook、twitter、pinterest 和 rss。

看图片

4

4 回答 4

0

另一种方法是仅使用 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

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

尝试这样的事情：

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

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

另一种方法是使用图层，如果要更改图像的不同颜色，请将白色字母和背景分隔为两层并更改不同的背景颜色，只需将字母拖放到背景上即可

于 2015-03-22T10:26:56.007 回答
0 

.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;
}
<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>

于 2014-11-13T14:43:08.313 回答