CSS Instagram 徽标答案

【问题标题】：CSS Instagram LogoCSS Instagram 徽标
【发布时间】：2016-08-24 12:43:17
【问题描述】：

我正在尝试为我的网站添加一个社交媒体图标，渐变使用 CSS3。目前，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 );

        }

【问题讨论】：

标签： html facebook css instagram social

【解决方案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%);
}

【讨论】：