Changing the background color of PNG Image while keeping search button in white color instead of grey color [closed]

Question

I have the search button image on my site which has black background and grey search button and this is PNG image with the following code in stylesheet.css

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

I want to change the black background color to orange color while displaying the search button in it in white color with the help of coding in CSS in stylesheet.css without physically changing the image.

Please guide me how can do this as I do not know the coding need help.

Answer 1

Transparent PNG's and SVG's With CSS

To do this with CSS you need to do either of two things.

1. Make your PNG(s) with colour and transparency. You can then use CSS to manipulate the colours. The main icon would be manipulated using something like the CSS hue-rotate filter

The below code will colour your PNG and background, then changes the colours on mouse:hover.

The filter:hue-rotate(90deg); number you use to achieve the colour you require, depends on the colour of your image.

---

   .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*/
}

---

2. Use an SVG with HTML and CSS and to create and manipulate your icon.

---

svg {
  fill:#FFA500;
  /*stroke:#fff; uncomment if required*/
  stroke-width:.5;
  background-color:#555 /*#555 = grey*/;
}