如何将鼠标悬停在使用渐变的图像上答案

【问题标题】：How can I hover over a image where it uses Gradient如何将鼠标悬停在使用渐变的图像上
【发布时间】：2019-05-29 10:04:01
【问题描述】：

我在我的网站上放置了一些通讯图标。其中之一是我从 Font Awesome 获得的 Instagram 图标，我给出的颜色与使用 Gradient 的 Instagram 徽标大致相同。现在的问题是，如果我想 :hover 它不起作用。我不知道如何解决它。

footer {
  background-color: black;
  height: 120px;
}

footer a {
  display: flex;
  justify-content: center;
  font-size: 70px;
  padding: 20px;
  text-decoration: none !important;
}

.fa-instagram {
  background: #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%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fa-instagram:hover {
  color: hsla(181, 6%, 67%, 0.5);
}

<!DOCTYPE html>

<html>

<head>
  <link rel="stylesheet" type="text/css" href="main.css">


  <title>Website Title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body>
  <footer>
    <a href="#" target="_blank">
      <i class="fab fa-instagram"></i>
    </a>
  </footer>
</body>

</html>

【问题讨论】：

标签： html css bootstrap-4 font-awesome

【解决方案1】：

您必须更改背景，而不是颜色。请注意仅更改背景图像以不覆盖背景剪辑属性：

footer {
  background-color: black;
  height: 120px;
}

footer a {
  display: flex;
  justify-content: center;
  font-size: 70px;
  padding: 20px;
  text-decoration: none !important;
}

.fa-instagram {
  background-image: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fa-instagram:hover {
  background-image: linear-gradient(hsla(181, 6%, 67%, 0.5), hsla(181, 6%, 67%, 0.5));
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<footer>
  <a href="#" target="_blank">
    <i class="fab fa-instagram"></i>
  </a>
</footer>

【讨论】：

【解决方案2】：

经过反复试验，我想出了这个。我在您的.fa-instagram:hover 中使用background 而不是color
然后我添加了-webkit-background-clip: text; 和-webkit-text-fill-color: transparent;
，我添加了transition:2s，但如果你不想要的话，你仍然可以删除它。

                
    footer {
        background-color: black;
        height: 120px;
    }

    footer a {
        display: flex;
        justify-content: center;
        font-size: 70px;
        padding: 20px;
        text-decoration: none !important;
    }

    .fa-instagram {
        background: #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%); 
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .fa-instagram:hover {
        background: hsla(181, 6%, 67%, 0.5);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition:2s;
    }

 <head>
            <link rel="stylesheet" type="text/css" href="main.css">
            <title>Website Title</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

  </head>
        <footer>
               <a href="#" target="_blank"id="instagram">
                    <i class="fab fa-instagram" ></i>
               </a>
        </footer>

【讨论】：