白地の画像に､カーソルをあわせたときに色を変えたいとおもっています（貼付画像をご参照ください）｡

その画像の「白地」によってやり方が変わります。

簡単なのは、その白地が「透過色」の場合。

<img class="change_background" src="...">

<style>
.change_background:hover {
    background-color: orange;
}
</style>

IMG 要素に :hover という疑似クラスを指定して、マウスカーソルが上に乗ったときに、というスタイルが指定できます。
ただ、元の画像が背景が透明色になっていない場合には、画像の加工が必要です。


面倒なのは、白地が「透明ではない白」の場合。
CSS だけではできなくて、ほんの少し HTML の助けが必要です。

<div class="change_background">     <!-- 画像を括る要素 -->
  <img src="...">
</div>

<style>
.change_background {
    display: inline-block;
}
.change_background:before {
    content: "\0020";
    position: absolute;
    width: 100px;       /* 画像のサイズに合わせる */
    height: 100px;      /* 画像のサイズに合わせる */
}
.change_background:hover:before {
    background-color: orange;
    opacity: 0.3;
}
</style>

IMG 要素を DIV などでくくって、そちらに CSS の目印をつけます。
で、マウスを重ねたときに、画像の上に半透明な色付きのカバーをかけてあげます。
半透明な要素を重ねているので、画像に書かれた文字は少しぼんやりしますし、濃い色の背景色は指定できません。


画像を IMG 要素ではなく、他の要素にして CSS で背景画像として指定するなら、タグはひとつだけで済みます。

<div class="change_background"></div>   <!-- IMG ではなく、DIV とか -->

<style>
.change_background {
    background-image: url(...);     /* 背景画像として、指定する */
    display: inline-block;
    width: 100px;       /* 画像のサイズに合わせる */
    height: 100px;      /* 画像のサイズに合わせる */
    background-repeat: no-repeat;
}
.change_background:before {
    content: "\0020";
    width: 100px;
    height: 100px;
    position: absolute;
}
.change_background:hover:before {
    background-color: orange;
    opacity: 0.3;
}
</style>

こちらも半透明な要素を重ねているので、二番目のやり方と同じような制約があります。


jsFiddle にサンプルを書いてみたので、そちらも合わせてご覧ください。
https://jsfiddle.net/c37hdxh3/