Изменить цвет прозрачного изображения при наведении на CSS - PullRequest
Новая
       7

Изменить цвет прозрачного изображения при наведении на CSS

0 голосов
/ 14 января 2020

Я пытаюсь изменить изображение lo go (прозрачный png) с белого на красный с CSS. Я не знаю никаких JS, только html и CSS.

Я пытался использовать css hover с цветом, но он не работает. Я использовал background-color, который работает, но я не хочу, чтобы фон изображения был красным. Я искал, но не думаю, что мое описание поиска очень хорошее.

Это html: 

<body>
<div class="background-container">
<header>


<a href="index.html"><img src="images/ReLiveLogoWHITE TRANSPARENT.png" class="logo"></a>

<nav>
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Blog</a></li>
    </ul>
</nav>
</header>

и css : 

    .logo {
     height: 30vh;
     margin: 1em;


     }

     .logo:hover {
     color: red;
     }

Я не могу загрузить фактическое изображение, поэтому я загружу бесплатное изображение. Я хочу покрасить pl anet красным или синим или любым другим цветом при наведении. Изображение также действует как кнопка «Домой».

прозрачное изображение

Ответы [ 3 ]

0 голосов
/ 14 января 2020

Измените lo go html на 

<a class="logo" href="index.html">
  <img src="images/ReLiveLogoWHITE TRANSPARENT.png" alt="">
</a>

и затем используйте это css

.logo {
  display: inline-block;
  text-decoration: none;
  background-color: transparent;
  height: 30vh;
  margin: 1em;
}
.logo:hover {
  background-color: red;
  text-decoration: none;
  cursor: pointer;
}
.logo img {
  border: 0;
}
0 голосов
/ 14 января 2020

Это возможно с CSS фильтрами, но для их точных чисел потребуется некоторое количество проб и ошибок. 

body {
  background: lightblue;
}

div {
  display: inline-block;
  width: 20vw;
  margin: 2vh;
}

img {
  max-height: 100%;
  width: 100%;
  display: block
}

img:hover {
  filter: invert(50%) sepia(100%) hue-rotate(290deg) saturate(500%);
}
<div>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/clipart365150.png" alt="">
</div>
0 голосов
/ 14 января 2020

Вы можете сделать это, используя javascript или, если вы просто хотите использовать css, выполните следующие действия:

Добавьте новое цветное изображение для состояния наведения: 

<a href="index.html">
   <img src="images/ReLiveLogoWHITE TRANSPARENT.png" class="logo">
   <img src="images/redImage.png" class="logo-hover">
</a>

Примените эти стили к CSS: 

A .logo {
   height: 30vh;
   margin: 1em;
   display: block;
}

A:hover .logo {
   display: none;
}

A .logo-hover {
   display:none;
}

A:hover .logo-hover {
   display:block;
}
...