У меня небольшая проблема.Окраска цвета по форме

Я хочу создать эффект наложения на изображении в следующем jsfiddle. http://jsfiddle.net/39gud4bh/1/

<div> 
<img id="bubble" src="http://png-1.findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/speech_bubble.png"> 
<img src="http://s30.postimg.org/lptvfyod9/speech_bubbleorange.png"> 
</img> 
</div> 

#bubble { 

}

Я хочу оверлей иметь цвет # ff9f2d

Как это возможно? Пытался лимерично все, что мог найти. Проблема в том, что изображение (возможно, не в jsfiddle) - это форма с прозрачным фоном. Это приводит к тому, что все мои попытки фонового/переднего плана фильтруют цвет, чтобы перекрасить весь квадрат, а не только форму.

Действительно нужна помощь. Заранее - Спасибо!

EDIT - Fiddle был обновлен, чтобы вносить желаемый результат CSS на серый пузырь.

источник

2014-11-19 Rasmus Hjorth Lüdeking

это вид неясен. Можете ли вы вставить изображение того, что вы ожидаете от окончательного вывода? И какой CSS вы попробовали? Ваш спецификатор пуст. –

Fiddle обновлен, к желаемому результату. –

Это может быть не точный ответ вам «Ищите, но, возможно, вы можете рассмотреть возможность использования шрифта Awesome. Это будет чистый, резкий пузырь, и вы можете легко изменить его размер и покрасить в любом случае с помощью CSS. Другим маршрутом будет использование SVG.

http://jsfiddle.net/wilchow/39gud4bh/5/

.fa-bubble { 
    font-size: 140px; 
    color: #333333; 
    cursor: pointer; 
} 
.fa-bubble:hover { 
    color: #ff9f2d; 
}

источник

2014-11-19 15:06:04 Wil

SVG определенно будет дополнительным решением здесь. –

Большое спасибо WIL. Даже не подозревал об этих добрых решениях, открыл мой спектр много! Спасибо, приятный вечер! –

Нет проблем. Удачи. – Wil

Просто переместите второе изображение поверх первой и установите непрозрачность

#overlay {z-index:100;opacity:0.2;position:relative;left:-131px;top:-3px; 
 
    
 
}

<div> 
 
    <img id="bubble" src="http://png-1.findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/speech_bubble.png"> 
 
    </img> 
 
    <img id="overlay" src="http://s30.postimg.org/lptvfyod9/speech_bubbleorange.png"> 
 
</div>

источник

2014-11-19 14:49:59 Billy

Прежде всего - Спасибо за ответ. –

НО, это не то, на что я нацелился. Я хочу перекрасить серый пузырь в тот же цвет, что и оранжевый пузырь. Но я хочу создать эффект в ТОЛЬКО CSS. Притвориться, будто оранжевого пузыря не было - это ТОЛЬКО там, чтобы описать проблему. –

Почему не просто использовать оранжевый пузырь ???? – Billy

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

Вы можете сделать это, если бы вы отменили прозрачные и цветные детали и заполнили весь квадрат цветом. Пример: http://jsfiddle.net/Arministrator/j5gLgyt8/

#bubble_img{ 
     background:yellow; 
} 
    #bubble_img:hover{ 
      background:#ff9f2d;

Или вы можете использовать два изображения (CSS спрайтов даже лучше), как показано в одном из ответов.

источник

2014-11-19 15:00:14 Armin

Насколько я знаю, нет свойства CSS, которое позволит вам изменить изображение серого цвета на цветное.

Однако обратное возможно с использованием фильтров CSS.

Таким образом, если мы поменяем «процесс» и сделаем цветное изображение серым по умолчанию, мы можем удалить этот стиль, возможно, при наведении, чтобы достичь эффекта, который мы ищем.

#bubble { 
 
    -webkit-filter: grayscale(1) brightness(0.3); 
 
} 
 
#bubble:hover { 
 
    -webkit-filter: none 
 
}

<div> 
 
    <img id="bubble" src="http://s30.postimg.org/lptvfyod9/speech_bubbleorange.png" /> 
 
</div>

Jsfiddle Comparison

ПРИМЕЧАНИЕ: CSS фильтры высоко экспериментальных и браузер поддержка бедных.

Это экспериментальная Технолог у

Поскольку спецификации этой технологии не стабилизируется, проверьте таблицу совместимости для соответствующих префиксы для использования в различных браузерах.Также отметим, что синтаксис и поведение экспериментальной технологии подлежит изменению в будущих версиях браузеров, как спецификация изменения

MDN Reference

CanIUse.com Reference

источник

2014-11-19 15:03:23