Как я могу навести курсор на изображение, где оно использует градиент - PullRequest
Новая
       21

Как я могу навести курсор на изображение, где оно использует градиент

2 голосов
/ 29 мая 2019

Я размещаю некоторые значки связи на моем сайте. Одним из них является значок Instagram, откуда я его получил от Font Awesome, и я выделил примерно тот же цвет, что и логотип Instagram, используя Gradient. Проблема сейчас в том, что если я хочу: наведите это не работает. Я не знаю, как я могу это исправить. 

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>

Ответы [ 2 ]

1 голос
/ 29 мая 2019

Вы должны изменить фон, а не цвет. Обратите внимание, чтобы изменить только background-image, чтобы не перекрывать свойство background-clip: 

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>
0 голосов
/ 29 мая 2019

после проб и ошибок я придумал это. Я использую background вместо color в вашем .fa-instagram:hover
А потом я добавил -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>
...