Hoe voeg ik een kleuroverlay toe aan een achtergrondafbeelding?

Ik heb deze vraag veel gezien, zowel op SO als op het web. Maar geen van hen is wat ik zoek.

Hoe voeg ik een kleuroverlay toe aan een achtergrondafbeelding met alleen CSS?

Voorbeeld HTML:

<div class="testclass">
</div>

Voorbeeld CSS:

.testclass {
    background-image: url("../img/img.jpg");
}

Let op:

• Ik wil dit oplossen door alleen CSS te gebruiken. d.w.z. ik wil GEEN onderliggende div toevoegen binnen de div “testclass” voor de kleuroverlay.

• Dit mag geen “zweefeffect” zijn. Ik wil gewoon een kleuroverlay toevoegen aan de achtergrondafbeelding.

• Ik wil dekking kunnen gebruiken, d.w.z. ik ben op zoek naar een oplossing die RGBA-kleur mogelijk maakt.

• Ik ben op zoek naar slechts één kleur, laten we zeggen zwart. Geen verloop.

Is dit mogelijk? (Het zou me verbazen als dat niet het geval is, maar ik heb hier niets over kunnen vinden), en zo ja, wat is de beste manier om dit te bereiken?

Alle suggesties en advies worden op prijs gesteld!

Antwoord 1, autoriteit 100%

Ik zie twee eenvoudige opties:

• meerdere achtergronden met een doorschijnend enkel verloop over afbeelding
• enorme ingezette schaduw

verloopoptie:

html {
  min-height:100%;
  background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(https://lorempixel.com/800/600/nature/2);
  background-size:cover;
}

schaduwoptie:

html {
  min-height:100%;
  background:url(https://lorempixel.com/800/600/nature/2);
  background-size:cover;
  box-shadow:inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}

een oude COCEEPEN van mij met enkele voorbeelden

Een derde optie

• met achtergrond-Blen-Mode :
  

  De background-blend-modeCSS-eigenschap Stelt in hoe een achtergrondafbeeldingen van een element met elkaar moeten mengen en met de achtergrondkleur van het element.

html {
  min-height:100%;
  background:url(https://lorempixel.com/800/600/nature/2) rgba(255, 0, 150, 0.3);
  background-size:cover;
  background-blend-mode: multiply;
}

Antwoord 2, Autoriteit 17%

U kunt een pseudo-element gebruiken om de overlay te maken.

.testclass {
  background-image: url("../img/img.jpg");
  position: relative;
}
.testclass:before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  background: rgba(0,0,0,.5);
}

Antwoord 3, Autoriteit 13%

background-imageneemt meerdere waarden.

Dus een combinatie van slechts 1 kleuren lineaire verloop en css blend modeszal de truc doen.

.testclass {
    background-image: url("../images/image.jpg"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
    background-blend-mode: overlay;
}

Merk op dat er helemaal geen ondersteuning is op IE / Edge voor CSS Blend-modi.

Antwoord 4, Autoriteit 2%

Probeer dit, het is eenvoudig en duidelijk. Ik heb het hier gevonden: https://css-tricks.com/tinted-images -meerdere achtergronden/

.tinted-image {
  width: 300px;
  height: 200px;
  background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}