Półprzezroczysta warstwa koloru na tle obrazu?

Mam DIV i chciałbym umieścić wzór jako tło. Ten wzór jest szary. Aby było trochę przyjemniej, chciałbym nałożyć na siebie „warstwę” jasnego, przezroczystego koloru. Poniżej jest to, co próbowałem, ale które nie działało. Czy istnieje sposób na nałożenie kolorowej warstwy na obraz tła?

Oto mój CSS:

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

Oto on:

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML do tego:

<div class="background">
    <div class="layer">
    </div>
</div>

Oczywiście musisz zdefiniować szerokość i wysokość .backgroundklasy, jeśli nie ma w niej innych elementów

Wiem, że to naprawdę stary wątek, ale pojawia się na górze w Google, więc oto inna opcja.

Ten jest czystym CSS i nie wymaga dodatkowego HTML.

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

Istnieje zaskakująca liczba zastosowań funkcji box-shadow.

Z CSS-Tricks ... istnieje jeden krok, aby to zrobić bez indeksowania Z i dodawania pseudoelementów - wymaga gradientu liniowego, co moim zdaniem oznacza, że ​​potrzebujesz wsparcia CSS3

.tinted-image {
  background-image: 
    /* top, transparent red */
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* your image */
    url(image.jpg);
}

Możesz także użyć gradientu liniowego i obrazu: http://codepen.io/anon/pen/RPweox

.background{
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('http://www.imageurl.com');
}

Jest tak, ponieważ funkcja gradientu liniowego tworzy obraz, który jest dodawany do stosu tła. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Potrzebny jest zatem element zawijający z obrazem bg, a w nim element treści z kolorem bg:

<div id="Wrapper">
  <div id="Content">
    <!-- content here -->
  </div>
</div>

i css:

#Wrapper{
    background:url(../img/bg/diagonalnoise.png); 
    width:300px; 
    height:300px;
}

#Content{
    background-color:rgba(248,247,216,0.7); 
    width:100%; 
    height:100%;
}

Spróbuj tego. Pracuje dla mnie.

.background {
    background-image: url(images/images.jpg);
    display: block;
    position: relative;
}

.background::after {
    content: "";
    background: rgba(45, 88, 35, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.background > * {
    z-index: 10;
}

Użyłem tego jako sposobu zarówno na stosowanie odcieni kolorów, jak i gradientów na obrazach, aby ułatwić stylizowanie tekstu nakładki dynamicznej, aby był czytelny, gdy nie można kontrolować profili kolorów obrazu. Nie musisz się martwić indeksem Z.

HTML

<div class="background-image"></div>

SASS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 247, 216, 0.7);
  }
}

CSS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
}

.background-image:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(248, 247, 216, 0.7);
  }

Mam nadzieję, że to pomoże

Zobacz moją odpowiedź na https://stackoverflow.com/a/18471979/193494, aby uzyskać kompleksowy przegląd możliwych rozwiązań:

1. używając wielu teł z gradientem liniowym,
2. wiele środowisk z wygenerowanym PNG lub
3. stylizacja: po pseudoelementie, aby działał jako dodatkowa warstwa tła.

Dlaczego tak skomplikowane? Twoje rozwiązanie było prawie właściwe, z wyjątkiem tego, że znacznie łatwiej jest uczynić wzór przezroczystym, a kolor tła jednolitym . PNG może zawierać folie. Więc użyj Photoshopa, aby wzór był przezroczysty, ustawiając warstwę na 70% i ponownie zapisując obraz. Potrzebujesz tylko jednego selektora. Działa w różnych przeglądarkach.

CSS:

.background {
   background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
   background-color: rgb(248, 247, 216);
}

HTML:

<div class="background">
   ...
</div> 

To są podstawowe. Oto przykład użycia, w którym przełączyłem się backgroundna, background-imageale obie właściwości działają tak samo.

body { margin: 0; }
div {
   height: 110px !important;
   padding: 1em;
   text-transform: uppercase;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 600;
   color: white;
   text-shadow: 0 0 2px #333;
}
.background {
   background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */
   }
.col-one {
  background-color: rgb(255, 255, 0);
}
.col-two {
  background-color: rgb(0, 255, 255);
}
.col-three {
  background-color: rgb(0, 255, 0);
}

<div class="background col-one">
 1. Background
</div> 
<div class="background col-two">
 2. Background
</div> 
<div class="background col-three">
 3. Background
</div> 

PROSZĘ ZACZEKAJ MINUTĘ! ZAŁOŻENIE CZASU zajmuje ZAŁADUNEK ZEWNĘTRZNYCH MODELI.

Ta strona wydaje się być raczej powolna ...

Możesz użyć półprzezroczystego piksela, który możesz wygenerować na przykład tutaj , nawet w base64. Oto przykład z białym 50%:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;

• bez przesyłania

• bez dodatkowego HTML

• Myślę, że ładowanie powinno być szybsze niż cień w polu lub gradient liniowy

Oto prostsza sztuczka z tylko css.

<div class="background"> </div>
    <style>
    .background {
      position:relative;
      height:50px;
      background-color: rgba(248, 247, 216, 0.7);
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); 
    }

    .background:after {
        content:" ";
        background-color:inherit;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
    }

    </style>

Kolejny z SVG jako wbudowanym obrazem nakładki (uwaga: jeśli używasz #wewnątrz kodu svg, musisz go urlencode!):

background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
                no-repeat center center/cover, 
            url('overlayed-image.jpg') no-repeat center center/cover;

Po prostu użyłem właściwości css obrazu tła na docelowym div tle.
Uwaga: obraz tła akceptuje tylko funkcje kolorów gradientu.
Użyłem więc gradientu liniowego, dodając dwukrotnie ten sam pożądany kolor nakładki (użyj ostatniej wartości rgba, aby kontrolować krycie kolorów).

Znalazłem również dwa przydatne zasoby do:

1. Dodaj tekst (lub div z dowolną inną zawartością) nad obrazem tła: Hero Image
2. Rozmycie tylko obrazu tła, bez rozmycia div na górze: Zamazany obraz tła

HTML

<div class="header_div">
</div>

<div class="header_text">
  <h1>Header Text</h1>
</div>

CSS

.header_div {
  position: relative;
  text-align: cover;
  min-height: 90vh;
  margin-top: 5vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
  filter: blur(2px);
}

.header_text {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}

Możesz także dodać krycie do koloru nakładki.

Zamiast robić

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

Możesz to zrobić:

background: url('../img/bg/diagonalnoise.png');

Następnie utwórz nowy styl dla koloru krycia:

.colorStyle{
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 0.8;
}

Zmień krycie na dowolną liczbę poniżej 1. Następnie ustaw ten styl koloru na taki sam rozmiar jak obraz. To powinno działać.