Как "подкрасить" изображение с помощью css

Question

Я пытаюсь подкрасить изображение с атрибутом фона, как это:

.image-holder:hover {
  opacity: 1;
  transition: opacity 1s, background 1s;
  background: #EBEFF7;
}

.image-holder {
  height: 250px;
  width: 200px;
  opacity: 0.5;
  transition: opacity 1s, background 1s;
}

<div class="image-holder">
  <img src="https://dummyimage.com/200x200/fff/000000.png" />
</div>

http://jsfiddle.net/6ELSF/1047/

Но изображение не "тонированное", как ожидалось.

При наведении это выглядит так:

но я хочу, чтобы это выглядело так:

Я попытался проверить какое-то решение, которое я нашел в отношении наложения изображений, но ни одно из них не помогло в моем примере. Как сделать это в наименьшей сложности?

Answer 1

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

img {
  filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(180deg);
}

Вам нужно будет адаптировать его к вашим потребностям... Надеюсь, это поможет.

С наилучшими пожеланиями, Алекс

Answer 2

В зависимости от того, использует ли ваш браузер фильтр поддержки, в вашем распоряжении много вариантов, caniuse.com выглядит многообещающе http://caniuse.com/:-

filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

Answer 3

С помощью :before Селектор можно подкрасить изображения разными цветами

.image-holder {
  height: 200px;
  width: 200px;
  position:relative; 
}    
.image-holder:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,255,255, 0.5);
  transition: all .3s linear;
}
.image-holder:hover:before { 
  background: none;
}

<div class="image-holder">
    <img src="http://lorempixel.com/200/200" />
</div>

Answer 4

Вы можете добиться этого, используя mix-blend-modeкоторый в настоящее время имеет поддержку ~88%. Вы можете использовать ту же разметку, что и раньше.

<div class="image-holder">
  <img src="https://dummyimage.com/200x200/fff/000000.png" />
</div>

Но используйте этот css:

div.image-holder {
  transition: background-color .2s;
  width: min-content;
}

div.image-holder:hover {
  background-color: #EBEFF7;
}

img {
  display: block;
  /* Blend with parents background: */
  mix-blend-mode: multiply;
}

Для этой демонстрации вы хотите подкрашивать белые к выбранному вами цвету, поэтому вы хотите использовать multiplyрежим смешивания. Если вы хотите тонировать черный цвет, используйтеscreen режим смешивания.

Демо Codepen

Answer 5

Изменение непрозрачности родительского контейнера изменяет все дочерние элементы. сделать отдельный div, чтобы контролировать свой оттенок. Я кое-что забил, но самое необходимое есть.

.image-holder {
  position: relative;
  max-height: 250px;
  max-width: 200px;
}

.image-holder img {
  display: block;
  opacity: 0.5;
  max-width: 100%;
  max-height: inherit;
}

.tint {
  position: absolute;
  max-height: 250px;
  max-width: 200px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  background: #00f;
  transition: opacity 1s;
}

.image-holder:hover .tint {
  opacity: 1;
}

<div class="image-holder">
  <div class='tint'></div>
  <img src="http://lorempixel.com/200/200" />
</div>

Answer 6

Это не совсем настоящий оттенок, но именно так мне легче нанести цветной слой поверх изображения. Уловка состоит в том, чтобы использовать абсолютный слой с цветом rgba поверх изображения. Он отлично работает для моих общих случаев. Попробовать!

.mycontainer{
  position:relative;
  width:50%;
  margin:auto;
}

.overtint {
  position:absolute;
  background-color: rgba(255,0,0,0.6);
  width:100%; height:100%;
}

img{ width:100%;}

a:hover .overtint { 
  background-color: rgba(0,255,0,0.6); 
  transition-duration: .5s;
}

<div class="mycontainer">
  <a href="#">
    <div class="overtint"></div>
    <img src="https://via.placeholder.com/300x150">
  </a>
</div>