Hoe kan ik een afbeelding met kleur overlappen in CSS?

.red {
    outline: 100px solid rgba(255, 0, 0, 0.5) !important;
    outline-offset: -100px;
    overflow: hidden;
    position: relative;
    height: 200px;
    width: 200px;
}

<div class="red">Anything can be red.</div>
<h1>Or even image...</h1>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" class="red"/>

4, Autoriteit 9%

#header.overlay {
    background-color: SlateGray;
    position:relative;
    width: 100%;
    height: 100%;
    opacity: 0.20;
    -moz-opacity: 20%;
    -webkit-opacity: 20%;
    z-index: 2;
}

zoiets. Voeg gewoon de overlayklasse aan de kop toe, uiteraard.

5, Autoriteit 6%

Gebruik het overgeslagen backgorund op het element en gebruik een lineaire gradiënt als uw kleur overlay door zowel start- als eindkleur-stops als dezelfde waarde te verklaren.

Houd er rekening mee dat lagen in een verklaring met meerdere achtergronden worden gelezen zoals ze worden weergegeven, van boven naar beneden, dus plaats eerst uw overlay en vervolgens uw bg-afbeelding:

#header {
  background: 
    linear-gradient(to bottom, rgba(100, 100, 0, 0.5), rgba(100, 100, 0, 0.5)) cover,
    url(../img/bg.jpg) 0 0 no-repeat fixed;
  height: 100%;
  overflow: hidden;
  color: #FFFFFF
}

Antwoord 6, autoriteit 5%

Je kunt met dergelijke instellingen ook een extra klas toevoegen. Overlay overlapt de inhoud niet en er is geen extra tag nodig

.overlay {
  position: relative;
  z-index: 0;
}
.overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
    opacity: .6;
    /* !!! */
    z-index: -1;
}

https://codepen.io/zeroox003/pen/yLYbpOB

Antwoord 7, autoriteit 5%

Hier is een creatief idee met box-shadow:

#header {
    background-image: url("apple.jpg");
    box-shadow: inset 0 0 99999px rgba(0, 120, 255, 0.5);
}

Wat gebeurt er

1. De backgroundstelt de achtergrond voor je element in.

2. De box-shadowis het belangrijkste onderdeel. Het plaatst in feite een heel grote schaduw aan de binnenkant van het element, bovenop de achtergrond, die semi-transparant is

Antwoord 8

Als je het niet erg vindt om absolute positionering te gebruiken, kun je je achtergrondafbeelding positioneren en vervolgens een overlay toevoegen met dekking.

div {
    width:50px;
    height:50px;
    background:   url('https://images1.wikia.nocookie.net/__cb20120626155442/adventuretimewithfinnandjake/images/6/67/Link.gif');
    position:absolute;
    left:0;
    top:0;
}
.overlay {
   background:red;
   opacity:.5;
}

Zie hier: http://jsfiddle.net/4yh9L/

Antwoord 9

In helpshift gebruikten ze de klas home-pageals

HTML

<div class="page home-page">...</div>

CSS

.home-page {
    background: transparent url("../images/backgrounds/image-overlay.png") repeat 0 0;
    background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;
}

je kunt zoiets proberen

Antwoord 10

Als je alleen een klas wilt toevoegen om de overlay toe te voegen:

span {
  padding: 5px;
}
.green {
  background-color: green;
  color: #FFF;
}
.overlayed {
  position: relative;
}
.overlayed::before {
  content: ' ';
  z-index: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #00000080;
}
.stand-out {
  position: relative;
  z-index: 2;
}

<span class="green overlayed">with overlay</span>
<span class="green">without overlay</span>
<br>
<br>
<span class="green overlayed">
  <span class="stand-out">I stand out</span>
</span>