Буду признателен, если вы поможете мне изменить цвет изображения, используя только CSS3 (изображение имеет оттенки серого).Как изменить цвет изображения, используя только CSS3 (изображение имеет оттенки серого)?
используя некоторые свойства CSS3, такие как фильтр ... благодарю вас заранее!
You can user filter css3,
.filter-me {
filter: <filter-function> [<filter-function>]* | none
}
Where is one of:
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
url() - for applying SVG filters
custom() - "coming soon"
Прежде всего, спасибо за ваш ответ! Я уже пробовал некоторые из этих функций, но я не получил нужный результат ... Другие мудрые вы можете сказать мне правильное значение каждой функции, чтобы преобразовать черное изображение в красное изображение? –
Насколько я знаю, вы не можете превратить исходное серое изображение в цветное. ближайшая вещь к тому, что используется sepia, но это не будет работать так, как вы хотите.
идея заключается в том, чтобы использовать в первом цветном изображении, сделать его серый с grayscale(100%) или saturate(0%), а затем (возможно, на событие, например: парить, нажмите, фокус и т.д.) цвет его снова с одним из свойств фильтра
смотри пример ниже
img {
filter:grayscale(100%);
height:200px;
width:auto;
}
img:hover {
filter:hue-rotate(100deg);
}<img src="https://placeimg.com/640/480/animals">дайте мне знать, если это помогает
Прежде всего, спасибо за ваш ретей! Просто, чтобы быть более ясным, мое исходное изображение серое, и я хочу, чтобы он был окрашен только одним цветом (красный или зеленый или оранжевый) с использованием CSS3. –
Вы можете добиться этого, наложив псевдоэлемент поверх изображения и используя свойство mix-blend-mode (отметьте browser support). В приведенном ниже примере я использовал overlay.
*{box-sizing:border-box;margin:0;padding:0;}
figure{
display:inline-block;
position:relative;
}
img{
vertical-align:middle;
}
figure::after{
background:#f00;
bottom:0;
content:"";
left:0;
mix-blend-mode:overlay;
opacity:.75;
pointer-events:none;
position:absolute;
right:0;
top:0;
}<figure>
<img alt="" height="250" src="https://unsplash.it/500/250?image=1082&gravity=south" width="500">
</figure>Благодарим за отзыв, это хорошо работает. –
Добро пожаловать. Если эта или одна из других ответов ответила на вашу проблему на ваше усмотрение, вы можете подумать о ее принятии. – Shaggy
Хороший ответ! Следует отметить, что mix-blend-mode: color; дает альтернативу в том же направлении и светимость в обратном (цвет под изображением). – vals
Добро пожаловать на переполнение стека. Пожалуйста, прочитайте [как задать вопрос] (stackoverflow.com/help/how-to-ask) и поставьте [mcve] s. – Shaggy
Возможный дубликат [Как сделать цвет изменения изображения во время перемещения мыши?] (Http://stackoverflow.com/questions/38687803/how-to-make-image-change-color-while-mouse-is-moving -over) – Shaggy