CSS Instagram徽标
问题描述:
我想为我的网站添加一个社交媒体图标,并且渐变是在CSS3中。 当前,当鼠标悬停时,隐藏图标轮廓。CSS Instagram徽标
这是我现在的代码。我的Facebook徽标起作用,除了纯色(background: #3b5998;)
而不是渐变webkit以外,其他徽标完全相同。 Facebook的工作原理应该是这样,当图标变为蓝色时,图标变成蓝色,中间是“F”。
关于如何在这里完成任何提示?谢谢!
.social-icons li.instagram a {
border-radius: 50%;
background: #F2F2F2 /* This is for the default "gray" background */
url(http://www.example.com/images/social/instagram.png) no-repeat 0 0;
}
.social-icons li.instagram a:hover {
background-color: #f09433;
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433', endColorstr='#bc1888',GradientType=1);
}
答
我意识到我的问题是,渐变被视为是图像,所以我做的是重叠两个'图像'来获得所需的结果。
所以最终确定的代码是:
.social-icons li.instagram a {
border-radius: 50%;
background: #F2F2F2 url(http://www.myprojectsite.com/images/social/instagram.png) no-repeat 0 0;
}
.social-icons li.instagram a:hover {
background-color: #f09433;
background-image: url('http://www.myprojectsite.com/images/social/instagram.png'), linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433', endColorstr='#bc1888',GradientType=1);
background-image: url('http://www.myprojectsite.com/images/social/instagram.png'), -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background-image: url('http://www.myprojectsite.com/images/social/instagram.png'), -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}