html - トリミングされた画像の修正とデザイン

Question

html & css で画像をトリミングしました。<span>タグをコーディングすると、トリミングされた画像が表示されます。しかし、どうすればそれを変更できるかを知る必要があります。

次のコードがあります。

    <style type="text/css">
.design  {
padding-left:25px;
background:url('Flings.png') no-repeat top left;
display: inline-block;
height: 17px;
width: 0px;
margin-left: 550px;
}
</style>
<div style="height: 200px;">
<span class="design" style='font-size: 40px;'></span>
</div>

span タグを使用していると、トリミングされた画像が表示されました。でも改造したい。

例：

<span class="desgin" style='color: red;'></span></h3>

画像自体に色を付けてサイズを変更したいのですが、ここで少し立ち往生しています。

あなたが私をよく理解してくれることを願っています。

ありがとう！