0

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

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

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

在 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;
 }

那么如何使中心部分只变成橙色，而不是全部图片呢？

在此处输入图像描述 邮件图标

4

3 回答 3

0

基本上你有两个选择：

  1. 使用不透明背景的图像。使用像 Gimp 这样的光栅编辑器来实现这一点
  2. 使用多个样式化的元素来伪造这种外观

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

于 2013-09-22T11:48:29.923 回答
0

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

小提琴

<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/

于 2013-09-22T11:54:53.703 回答
0

尝试这个：

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;
}

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

演示

于 2013-09-22T11:55:57.530 回答