Имея прозрачный PNG, отображающий простую форму белого цвета, возможно ли как-то изменить цвет этой формы с помощью CSS? Какое-то наложение или что-то еще?
Вы можете использовать фильтры с-в WebKit-фильтр " и " фильтр`: Фильтры являются относительно новыми для браузеров, но поддерживается в более чем 90% браузеров в соответствии со следующей таблицей CanIUse: https://caniuse.com/#feat=css-filters
Можно преобразовать изображение в оттенки серого, сепия и многое другое (смотрите на примере).
Так что вы теперь можете изменить цвет PNG-файл с фильтрами.
в
body {
background-color:#03030a;
min-width: 800px;
min-height: 400px
}
img {
width:20%;
float:left;
margin:0;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }
<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">
в
<суб>источник</суб>
Я нашел отличный сайт CodePen пример, который вы вставить свой шестигранный цвет значение и возвращает нужный фильтр, чтобы применить этот цвет в PNG
УСБ фильтр генератор для преобразования от черного до цели наговора цвет
например мне нужно PNG в следующие цвета #1a9790
затем вы должны применить следующий фильтр, чтобы вы ПНГ
filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
Возможно, вы захотите взглянуть на шрифты Icon. http://css-tricks.com/examples/IconFont/
EDIT: Я'использую Font-Awesome в своем последнем проекте. Вы даже можете использовать его в качестве бутстрапа. Просто поместите это в <head>
:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<!-- And if you want to support IE7, add this aswell -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">
А затем добавьте несколько иконок-связок, как здесь:
<a class="icon-thumbs-up"></a>
Вот полная шпаргалка
--edit--
Font-Awesome использует другие имена классов в новой версии, вероятно, потому что это делает CSS файлы значительно меньше, и чтобы избежать двусмысленных css классов. Так что теперь вы должны использовать:
<a class="fa fa-thumbs-up"></a>
EDIT 2:
Только что обнаружил, что github также использует свой собственный шрифт иконок: Octicons. Его можно скачать бесплатно. У них также есть несколько советов о том, как создать свой собственный шрифт иконок.
Я'вэ был в состоянии сделать это с помощью фильтров SVG. Вы можете написать фильтр, который умножает цвета исходного изображения с цветом, который вы хотите изменить. В нижеприведенном коде, флуд-цвет цвет мы хотим изменить изображения цвета (красный в данном случае.) feComposite рассказывает фильтра, как мы'повторно обрабатывать цвет. Формула для feComposite с арифметикой (К1и1И2 + К2П1 + К3И2 + К4), где I1 и I2 являются входными цветов Для в/дюйм2 соответственно. Поэтому указание только К1=1 означает, что он будет делать только и1*И2, что означает умножения и входные цвета.
Примечание: это работает только с HTML5, так как это, используя встроенный SVG. Но я думаю, что вы могли бы сделать эту работу с устаревшей версией браузера, поставив SVG в отдельный файл. Я не'т пытались этот подход еще.
Здесь'ы фрагмент: в
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
<defs>
<filter id="colorMask1">
<feFlood flood-color="#ff0000" result="flood" />
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask1)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
<defs>
<filter id="colorMask2">
<feFlood flood-color="#00ff00" result="flood" />
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask2)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
<defs>
<filter id="colorMask3">
<feFlood flood-color="#0000ff" result="flood" />
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask3)" />
</svg>
в
Да :)
Surfin' Safari - Blog Archive » CSS Masks
WebKit теперь поддерживает альфа-маски в CSS. Маски позволяют наложить на содержимое поля шаблон, который может быть использован для вырезания частей поля в конечном отображении. Другими словами, вы можете обрезать сложные фигуры на основе альфа-канала изображения.
[...] Мы ввели новые свойства, чтобы предоставить веб-дизайнерам большой контроль над этими масками и тем, как они применяются. Новые свойства аналогичны уже существующим свойствам background и border-image.
-webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image)
В большинство браузеров, Вы можете использовать фильтры :
на <ИМГ>
элементы и фоновые изображения и другие элементы
и установить их статически в ваш CSS, или динамически с помощью JavaScript
Посмотреть демки ниже.
<ИМГ>
Вы можете применить эту технику к <ИМГ>
элемент :
в
<img id="original" src="http://i.stack.imgur.com/rfar2.jpg" />
<img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />
#original, #changed {
width: 45%;
padding: 2.5%;
float: left;
}
#changed {
-webkit-filter : hue-rotate(180deg);
filter : hue-rotate(180deg);
}
в
Вы можете применять эту технику, чтобы фоновое изображение :
в
<div id="original"></div>
<div id="changed"></div>
#original, #changed {
background: url('http://i.stack.imgur.com/kaKzj.jpg');
background-size: cover;
width: 30%;
margin: 0 10% 0 10%;
padding-bottom: 28%;
float: left;
}
#changed {
-webkit-filter : hue-rotate(180deg);
filter : hue-rotate(180deg);
}
в
Вы можете использовать JavaScript, чтобы установить фильтр во время выполнения :
в
<div id="original"></div>
<div id="changed"></div>
var element = document.getElementById("changed");
var filter = 'hue-rotate(120deg) saturate(2.4)';
element.style['-webkit-filter'] = filter;
element.style['filter'] = filter;
#original, #changed {
margin: 0 10%;
width: 30%;
float: left;
background: url('http://i.stack.imgur.com/856IQ.png');
background-size: cover;
padding-bottom: 25%;
}
в
Думаю у меня есть решение для этого, что'ы) именно то, что вы искали 5 лет назад, и б) немного проще чем другие варианты здесь код.
С любой белой ПНГ (например, белые иконки на прозрачном фоне), можно добавить : после селектора перекрашивать.
.icon {
background: url(img/icon.png); /* Your icon */
position: relative; /* Allows an absolute positioned psuedo element */
}
.icon::after{
position: absolute; /* Positions psuedo element relative to .icon */
width: 100%; /* Same dimensions as .icon */
height: 100%;
content: ""; /* Allows psuedo element to show */
background: #EC008C; /* The color you want the icon to change to */
mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
}
Увидеть этот сайт CodePen (применение замены цвета при наведении): http://codepen.io/chrscblls/pen/bwAXZO
Я нашел это, хотя погуглив, я нашел лучшей работы для меня...
HTML-код
<div class="img"></div>
УСБ
.img {
background-color: red;
width: 60px;
height: 60px;
-webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png');
}
Мне требуется определенный цвет, поэтому фильтр не't работа для меня.
Вместо этого, я создал див, эксплуатируя экране несколько фоновых изображений и линейный-градиент функции (которая создает себе образ). Если вы используете режим наложения смеси, фактический изображения будут смешиваться с созданными на "градиент" и изображение, которое содержит нужный цвет (здесь #BADA55)
в
.colored-image {
background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png");
background-blend-mode: overlay;
background-size: contain;
width: 200px;
height: 200px;
}
<div class="colored-image"></div>
в
Отвечаешь, потому что я искал решение для этого.
перо в @chrscblls ответ хорошо работает, если у вас есть белый или черный фон, но мою я'т. Также, изображения были получены с НГ-повтор, поэтому я не мог'т иметь свой URL-адрес в мой CSS и вы можете'т использовать ::после на в img теги.
Поэтому, я решил обойти и думал, что это может помочь людям, если они тоже спотыкаетесь.
Итак, что я сделала почти так же, три главных отличия:
Изменить с черного на белый или черный цвет фона должны быть белыми. От черного до цвета, вы можете выбрать любой цвет. От белого до цвета Тхо, вы'Лл нужно выбрать противоположный цвет, который вы хотите.
.divClass{
position: relative;
width: 100%;
height: 100%;
text-align: left;
}
.divClass:hover::after, .divClass:hover::before{
position: absolute;
width: 100%;
height: 100%;
background: #FFF;
mix-blend-mode: difference;
content: "";
}
Там's нет необходимости целый набор шрифтов, если вам нужна только одна иконка, плюс я чувствую, что это более "чистым" и в качестве отдельного элемента. Так, для этой цели, в HTML5 вы можете разместить СВГ непосредственно внутри потока документов. Затем вы можете определить класс В вашей .Таблицы стилей CSS и открыть свой цвет фона с заполнить
собственность:
Рабочая скрипка:
Обратите внимание, что в примере, я'вэ использовать:наведите Альто иллюстрируют поведение; если вы просто хотите изменить цвет то "нормальные" в состоянии, вы должны удалить псевдокласса.
в
body{
background: #333 url(/images/classy_fabric.png);
width: 430px;
margin: 0 auto;
padding: 30px;
}
.preview{
background: #ccc;
width: 415px;
height: 430px;
border: solid 10px #fff;
}
input[type='radio'] {
-webkit-appearance: none;
-moz-appearance: none;
width: 25px;
height: 25px;
margin: 5px 0 5px 5px;
background-size: 225px 70px;
position: relative;
float: left;
display: inline;
top: 0;
border-radius: 3px;
z-index: 99999;
cursor: pointer;
box-shadow: 1px 1px 1px #000;
}
input[type='radio']:hover{
-webkit-filter: opacity(.4);
filter: opacity(.4);
}
.red{
background: red;
}
.red:checked{
background: linear-gradient(brown, red)
}
.green{
background: green;
}
.green:checked{
background: linear-gradient(green, lime);
}
.yellow{
background: yellow;
}
.yellow:checked{
background: linear-gradient(orange, yellow);
}
.purple{
background: purple;
}
.pink{
background: pink;
}
.purple:checked{
background: linear-gradient(purple, violet);
}
.red:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
filter: opacity(.5) drop-shadow(0 0 0 red);
}
.green:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
filter: opacity(.5) drop-shadow(0 0 0 green);
}
.yellow:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
filter: opacity(.5) drop-shadow(0 0 0 yellow);
}
.purple:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 purple);
filter: opacity(.5) drop-shadow(0 0 0 purple);
}
.pink:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 pink);
filter: opacity(.5) drop-shadow(0 0 0 pink);
}
img{
width: 394px;
height: 375px;
position: relative;
}
.label{
width: 150px;
height: 75px;
position: absolute;
top: 170px;
margin-left: 130px;
}
::selection{
background: #000;
}
<div class="preview">
<input class='red' name='color' type='radio' />
<input class='green' name='color' type='radio' />
<input class='pink' name='color' type='radio' />
<input checked class='yellow' name='color' type='radio' />
<input class='purple' name='color' type='radio' />
<img src="https://i.stack.imgur.com/bd7VJ.png"/>
</div>
в
Источник: https://codepen.io/taryaoui/pen/EKkcu
В буквальном смысле менять цвет, можно включить CSS-перехода, с -в WebKit-фильтр, где, когда что-то случается, вы вызвали бы -в WebKit-фильтр вашего выбора. Например:
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}