如何控制背景区域，使其仅限制区域有其他区域的颜色不？

Question

我有一个邮件图标，png透明文件。该文件的宽度= 50px＆amp;高度= 50px，但只有中心部分有邮件图片。中心部分的宽度= 25px＆amp; height = 25px见（http://i.stack.imgur.com/aGRVp.png）。

我希望当用户胡扯邮件时，中央部分的背景变为橙色。此时，当我鼠标悬停在整个背景上时，像这张照片一样变成橙色（http://i.stack.imgur.com/RgnEX.png）。这个不好。

请参阅http://jsfiddle.net/ZDY55/。

in html

<img src="http://i.stack.imgur.com/aGRVp.png" alt="close" title="message" width="25px"       height="25px" class="{style.mailIcon}"  />

在Css

.mailIcon:hover {   
  background: 10px 25px orange;
  background-repeat:no-repeat;
  background-position:center;
 }

那么如何让中心部分只获得橙色，而不是所有图片？

Answer 1

基本上你有两个选择：

1. 使用非透明背景的图像。使用像Gimp这样的光栅编辑器来实现这个目标
2. 使用多个元素来伪造此外观

我个人推荐第一个选项，因为它是自然的解决方案，并且它不需要标记中的多余元素。

Answer 2

您应该考虑制作两张不同的照片，一张是正常的，一张是您想要的背景。 另一个选择是容器div（对我来说不是一个好主意，但它会起作用）

fiddle

<div id="container">
    <img src="http://i.stack.imgur.com/aGRVp.png" alt="close" title="Close message" width="25px" height="25px" 
    background="orange"  />
</div>

#container{
    margin-top:8px;

}
#container:hover{
    width:25px;
    height:16px;
    background-color:orange;

}
#container img{
    margin-top:-8px;    

}

第三个选项，占用图像上的所有空白区域。 使用剪切图像，您可以使用它。

<img src="http://i.imgur.com/aLkrqSn.png" title="Hosted by imgur.com" />

img{
   margin-top:8px;    
    width:25px;
}
img:hover{
    background-color:orange;    
}

http://jsfiddle.net/ZDY55/18/

Answer 3

试试这个：

<强> HTML

<div class="mailIcon">
    <img src="http://i.stack.imgur.com/aGRVp.png" alt="close" title="Close message" width="25px" height="25px" background="orange"/>
</div>

<强> CSS

.mailIcon:hover {   
  background-color:orange;
  display:inline-block;
}

.mailIcon img {
  margin:-12px 0 -7px;
}

您可以添加其他必要的微调

DEMO