Изменение цвета фона изображения PNG с сохранением белого цвета кнопки поиска вместо серого [закрыто]

У меня есть изображение кнопки поиска на моем сайте с черным фоном и серой кнопкой поиска, и это изображение PNG со следующим кодом в таблице стилей.css

Кнопка поиска в PNG-изображении

.topsearch .btn-search {
    width:29px;
    height:29px;
    background:url(images/btn_search.png) no-repeat;
    position:relative;
    z-index:2}

Я хочу изменить черный цвет фона на оранжевый цвет при отображении кнопки поиска в нем белым цветом с помощью кодирования в CSS в stylesheet.css без физического изменения изображения.

Пожалуйста, помогите мне, как это сделать, так как я не знаю, нужна ли помощь в кодировании.

Какое это имеет отношение к графическому дизайну?
Это графика и это дизайн. Я занялся кодированием, чтобы воплотить в жизнь свой графический дизайн. Я начал с ActionScript, затем перешел к использованию CSS3 для создания классной графики и графических эффектов. Например, вы можете использовать код для рисования SVG на веб-страницах и стилизовать его с помощью дополнительного кода, обычно CSS. Для меня код является такой же частью графического дизайна, как и использование Photoshop (в котором вы также можете использовать код для управления SVG и другой графикой). Браузер — это просто новый тип поддона.
Однако @Nemish, вы обычно получите более быстрый и подробный ответ, если опубликуете сообщение в Stack Overflow stackoverflow.com

Ответы (1)

Прозрачные PNG и SVG с CSS

Чтобы сделать это с помощью CSS, вам нужно сделать одну из двух вещей.

  1. Сделайте свой PNG с цветом и прозрачностью. Затем вы можете использовать CSS для управления цветами. Главный значок будет управляться с помощью чего-то вроде фильтра CSS hue-rotate.

Приведенный ниже код закрасит ваш PNG и фон, а затем изменит цвета на mouse:hover.

Число filter:hue-rotate(90deg);, которое вы используете для получения требуемого цвета, зависит от цвета вашего изображения.

   .topsearch .btn-search {
      position:relative;
      width:29px;
      height:29px;
      background:url(images/btn_search.png) no-repeat;
      filter:hue-rotate(90deg);
      background-color:#FFA500; /*#FFA500 = orange in hex*/
      z-index:2}
    }
   .topsearch .btn-search:hover {
      filter:hue-rotate(50deg);
      background-color:#000; /*#000 = blackin hex*/
}
  1. Используйте SVG с HTML и CSS для создания значка и управления им.
svg {
  fill:#FFA500;
  /*stroke:#fff; uncomment if required*/
  stroke-width:.5;
  background-color:#555 /*#555 = grey*/;
}

введите описание изображения здесь

Изменение цвета фона изображения PNG с сохранением белого цвета кнопки поиска вместо серого [закрыто]
СпросиСетьПолитика конфиденциальности1y, 0v