Jak dodać nakładkę kolorów do obrazu tła?

Question

Widziałem to pytanie zarówno na SO, jak i na stronie internetowej. Ale żaden z nich nie jest tym, czego szukam.

Jak dodać nakładkę koloru do obrazu tła przy użyciu tylko CSS?

Przykład HTML:

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

Przykład CSS:

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

Uwaga:

• Chcę rozwiązać ten problem tylko za pomocą CSS. tj. NIE chcę dodawać elementu div dziecka w klasie div "testclass" dla nakładki kolorów.

• Nie powinien to być efekt "hover" Chcę po prostu dodać kolorowy overay do obrazu tła.

• Chcę móc używać nieprzezroczystości, tj. Szukam rozwiązania, które pozwala na kolor RGBA.

• To nie jest garstka, szukam tylko jednego koloru, powiedzmy czarnego.

Czy to możliwe? (Byłbym zaskoczony, gdyby nie, ale nie byłem w stanie nic na ten temat znaleźć), a jeśli tak, to w jaki najlepszy sposób to osiągnąć? Wszystkie sugestie i porady są aprobowane!

Answer 1

widzę 2 jest łatwy opcje:

• wielokrotność tło z pojedynczym gradientem translucide o wersja obrazu
• hudge wstawka cień

opcja gradient:

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

cień opcjonalnie:

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

stary codepen kopalni z nielicznych przykładów

Answer 2

background-image ma wiele wartości.

, więc kombinacja liniowego gradientu tylko jednego koloru i css blend modes wystarczy.

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

Należy zauważyć, że w ogóle nie ma obsługi trybów mieszania IE/Edge dla CSS.

Answer 3

Możesz użyć pseudo elementu do utworzenia nakładki.

.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); 
} 

Answer 4

Możesz dodać odcień

Html (<div class=tint>img src chose picture of what color overlay you want</div>)

Css (.tint img{"tranparrent:50%;"}) ****

Answer 5

spróbować, to proste i jasne. Znalazłem go stąd: https://css-tricks.com/tinted-images-multiple-backgrounds/

.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); 
}