Półprzezroczysta warstwa kolorów nad obrazem tła?

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

Ten jest czystym CSS i nie wymaga żadnego 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 pseudo elementów-- wymaga gradientu liniowego, co myślę, że 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 również 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');
}

Dzieje się 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

Następnie potrzebujesz elementu zawijającego obrazek bg, a w nim elementu zawartoś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. Mi pasuje.

.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 do nakładania tintów kolorów, jak i gradientów na obrazy, aby dynamiczne nakładanie tekstu było łatwiejsze do stylizacji w celu uzyskania czytelności, gdy nie można kontrolować profili kolorów obrazu. Nie musisz się martwić o z-index.

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

Hope it helps

Zobacz moją odpowiedź na https://stackoverflow.com/a/18471979/193494 dla wszechstronnego przeglądu możliwych rozwiązań:

1. używanie wielu tła z gradientem liniowym,
2. Wiele tła z wygenerowanym PNG, lub
3. stylizacja an: after pseudoelement to act as a secondary background layer.

Dlaczego tak skomplikowane? Twoje rozwiązanie było prawie słuszne, ale łatwiej jest uczynić wzór przezroczystym, a kolor tła jednolitym . PNG może zawierać przezroczystości. Użyj programu photoshop, aby uczynić wzór przezroczystym, ustawiając warstwę na 70% i ponownie zapisując obraz. Następnie potrzebujesz tylko jednego selektora. Działa między przeglądarkami.

CSS:

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

HTML:

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

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 wgrywania

• Bez dodatkowego html

• Myślę, że ładowanie powinno być szybsze niż box-shadow lub liniowy gradient

Oto prostsza sztuczka tylko z 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>