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

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

.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>

Ответ 1

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

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%);

Ответ 2

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

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

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

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

Ответ 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>

Ответ 4

Изменение непрозрачности родительского контейнера меняет всех детей. сделайте отдельный 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>

Ответ 5

Это не совсем настоящий оттенок, но мне легче добиться цветового слоя поверх изображения. Хитрость заключается в том, чтобы использовать абсолютный слой с цветом 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>