Półprzezroczysta warstwa koloru na tle obrazu?


213

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

Odpowiedzi:


217

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


10
absolutnie nie ma powodu do względnego i absolutnego pozycjonowania.
Sven Bieder,

2
Ach tak, oczywiście, byłem w modalnym oknie pop, nie wiem dlaczego. Twoja odpowiedź jest oczywiście czystsza i łatwiejsza.
Johannes Klauß

@ JohannesKlauß, dlaczego jego odpowiedź jest czystsza i łatwiejsza? to nie działa, przynajmniej w moim przypadku.
Danny22

2
Myślę, że to jest czystsze. Shadow-box ma problemy, jeśli zawartość nie jest dłuższa niż bg itp.
Jack

1
Idealne rozwiązanie!
Roy Shoa,

300

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.


3
Bardzo dobrze! Czy to dobry pomysł pod względem wydajności? Nie przyjrzałem się występowi cienia
Miguel Stevens

18
Niezły hack, ale świetny zabójca wydajności. Spowolni to każde urządzenie mobilne. Shadow box powoduje problemy z wydajnością na urządzeniach mobilnych. Lepiej tego uniknąć, zwłaszcza jeśli istnieje inna droga.
Heksodus

4
Jesteś genialnym panem!
Mika,

7
Tylko aktualizacja kilka lat później: obecnie używam tej metody na całym kotulas.com i nie zauważyłem żadnego znaczącego spowolnienia. To może stać się problemem, jeśli używasz go na setkach elementów, ale nawet na stronie z ponad 150 obrazkami, to nie jest dla mnie problem. (I to jest na komputerze roboczym.) Oczywiście, z pewnością będziesz chciał go przetestować przed czasem, aby upewnić się, że jest odpowiedni dla Ciebie. A jeśli chodzi o starą kompatybilność przeglądarki, ponieważ awarią jest to, że użytkownik nie widzi efektu najechania kursorem (bez innych problemów), nie mam nic przeciwko.
BevansDesign

8
Ja osobiście używać go tak: box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .2).
Neurotransmitter

135

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

Działa to świetnie, nie można animować gradientów, ale jeśli chcesz pulsować kolorem, nie sądzę, że jest to możliwe przy żadnej metodzie.
sricks

1
Miałem background-size:cover;i background-position:center center;ustawiłem ten element. To wydaje się anulować ten efekt.
Pociesz

Działa świetnie z tłem w tle: okładka; po. Przynajmniej na chromie.
davidbonachera

Zdecydowanie najwygodniejszy sposób na przyciemnianie wzorów i obrazów tła, ale należy to sprawdzić w Chrome i innych, szczególnie jeśli zastosuje się go do tagu body, chrom będzie przewijał się z dużą ilością opóźnień. FF dobrze sobie z tym radzi.
Hastig Zusammenstellen,

4
Czy jestem jedynym wystarczająco dorosłym, aby uzyskać referencję Toma?
Abram


26

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

25

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

2
To naprawdę świetna odpowiedź, która nie wymaga dodatkowych elementów HTML. Dzięki!
patr1ck

16

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


To działa, ale musisz zmienić drugie „left: 0;” do „bottom: 0;”
Matthew Hudson

1
To powinna być zaakceptowana odpowiedź, ponieważ pozwala uniknąć tworzenia niepotrzebnych elementów. Tylko upewnij się, że twój .background-image divma przynajmniej pozycję: krewny
mjsarfatti

6

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.

4
Nie publikuj linków jako odpowiedzi. Umieść odpowiedni kod tutaj, ale dodatkowo link do źródła, z którego go skopiowałeś.
Blazemonger,

4

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


Czy możesz na przykład zastosować kolor tła :hover, który nakłada się na obraz tła?
Sir

uruchomienie programu Photoshop i zrobienie tego zajęłoby więcej czasu niż dodanie kilku wierszy kodu.
nihiser

Próbowałem tego, ale okazało się, że przezroczysty plik png ma dość duży rozmiar pliku (~ 500 kb), co może być wadą tego podejścia
'18

@madz Mówiłem o tworzeniu wzoru - co nie powinno skutkować dużym plikiem. Dodałem przykład z obrazem o wymiarach 110 x 110 pikseli, który ma zaledwie 5 KB. Jeśli naprawdę potrzebujesz większego obrazu, spróbuj go skompresować za pomocą tinypng.com .
Heksodus

2

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


2

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>


1

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;

0

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

0

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ć.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.