Как управлять областью фона, чтобы цвет только на ограниченной области был другим?

Question

Как управлять областью фона, чтобы цвет только на ограниченной области был другим?

0

У меня есть значок почты, прозрачный файл png. Файл имеет ширину = 50px & height = 50px, но только центральная часть получила почтовую картинку. Центральная часть имеет ширину = 25px & height = 25px (http://i.stack.imgur.com/aGRVp.png).

Я хочу, чтобы, когда пользователь просматривал почту, фон центральной части превратился в Orange. В этот момент, когда мышь над всем фоном стала оранжевой, как эта картина (http://i.stack.imgur.com/RgnEX.png). Это не хорошо.

Pls см. 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;
 }

Итак, как сделать центральную часть только оранжевым цветом, не все изображение?.

Kiti 22 сен. 2013, в 13:59

Источник

Теги:

html

css

background

3 ответа

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

Вы можете добавить другую необходимую настройку

DEMO

Shina 22 сен. 2013, в 10:02

0

у этого есть некоторый апельсин на вершине & основании. Ты можешь отрубить их?
Kiti 22 сен. 2013, в 12:03
0

Да, я знаю, но вы можете легко исправить это с некоторыми полями ... см. Отредактированную версию.
Shina 23 сен. 2013, в 10:07

0

В принципе у вас есть два варианта:

Используйте изображение с непрозрачным фоном. Используйте растровый редактор, такой как Gimp, для достижения этого
Используйте несколько элементов в стиле, чтобы подделать этот внешний вид

Я лично рекомендую первый вариант, потому что это естественное решение, и вам не нужны лишние элементы в вашей разметке.

kdani 22 сен. 2013, в 09:52

Ещё вопросы

у этого есть некоторый апельсин на вершине & основании. Ты можешь отрубить их?
Да, я знаю, но вы можете легко исправить это с некоторыми полями ... см. Отредактированную версию.

Heaven42 · Accepted Answer · 2013-09-22T09-06-00.000Z

Вы должны рассмотреть возможность создания двух разных изображений: одного нормального и одного с фоном, который вы хотите. Другим вариантом будет контейнерный 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/

Итак, подход с двумя картинками и контейнерный подход, какой из них лучше, проще?
Подход двух картинок для меня проще и лучше.