Jak połączyć obraz tła i gradient CSS3 na tym samym elemencie?


1250

Jak użyć gradientów CSS3 do mojego, background-colora następnie zastosować a, background-imageaby zastosować jakąś lekką przezroczystą teksturę?


9
Uwaga: w ten sposób możesz także ustawić obraz tła (15 pikseli na środku) lub ustawić jego właściwość „repeat” (przykład działa w przeglądarce Firefox 3.6+). some-class {background: url („../ icon.png”) no- powtórz 15px środek, -moz-liniowy-gradient (środek na górze, #FFFFFF, #DDDDDD);}
Julien Bérubé

SVG lub SVG + CSS mogą być używane do tworzenia płaskich tekstur (szum) lub gradientów teksturowanych.
Clint Pachl

Odpowiedzi:


1544

Wiele środowisk!

body {
  background: #eb01a5;
  background-image: url("IMAGE_URL"); /* fallback */
  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}

Te 2 wiersze są rezerwowe dla każdej przeglądarki, która nie robi gradientów. Zobacz uwagi dotyczące układania obrazów tylko w IE <9 poniżej.

  • Linia 1 ustawia płaski kolor tła.
  • Wiersz 2 ustawia cofanie obrazu tła.

Ostatnia linia ustawia obraz tła i gradient dla przeglądarek, które mogą je obsłużyć.

  • Linia 3 jest przeznaczona dla wszystkich stosunkowo nowoczesnych przeglądarek.

Prawie wszystkie obecne przeglądarki obsługują wiele obrazów tła i tła css. Zobacz http://caniuse.com/#feat=css-gradients, aby uzyskać informacje na temat obsługi przeglądarki. Dobry post na temat tego, dlaczego nie potrzebujesz wielu prefiksów przeglądarki, zobacz http://codepen.io/thebabydino/full/pjxVWp/

Stos warstw

Należy zauważyć, że pierwszy zdefiniowany obraz będzie najwyższy na stosie. W takim przypadku obraz znajduje się na GÓRZE gradientu.

Aby uzyskać więcej informacji na temat warstwowania w tle, patrz http://www.w3.org/TR/css3-background/#layering .

TYLKO układanie obrazów (bez gradientów w deklaracji) Dla IE <9

IE9 i nowsze wersje mogą układać obrazy w ten sam sposób. Możesz użyć tego do stworzenia obrazu gradientu dla ie9, chociaż osobiście nie zrobiłbym tego. Należy jednak zauważyć, gdy używane są tylko obrazy, tzn. <9 zignoruje instrukcję zastępczą i nie pokaże żadnego obrazu. Nie dzieje się tak po uwzględnieniu gradientu. Aby w tym przypadku użyć pojedynczego obrazu zastępczego, sugeruję użycie wspaniałego warunkowego elementu HTML Paula Irisha wraz z kodem zastępczym:

.lte9 #target{ background-image: url("IMAGE_URL"); }

Pozycja w tle, zmiana rozmiaru itp.

Inne właściwości, które miałyby zastosowanie do pojedynczego obrazu, mogą być również oddzielone przecinkami. Jeśli podano tylko 1 wartość, zostanie ona zastosowana do wszystkich ułożonych obrazów, w tym gradientu. background-size: 40px;ograniczy zarówno obraz, jak i gradient do wysokości i szerokości 40 pikseli. Jednak użycie background-size: 40px, cover;spowoduje, że obraz będzie 40px, a gradient pokryje element. Aby zastosować ustawienie tylko do jednego obrazu, ustaw wartość domyślną dla drugiego: background-position: 50%, 0 0;lub w przeglądarkach, które go obsługują, użyj initial:background-position: 50%, initial;

Możesz także użyć tła stenografii, ale to usuwa kolor zastępczy i obraz.

body{
    background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}

To samo dotyczy pozycji tła, powtarzania tła itp.


36
Dziękuję za odpowiedź, jakieś pomysły na to, jak kontrolować background-positiontylko obraz, a nie gradient?
adardesign

44
dzięki za to, doskonała informacja. | @adardesign: użyj tła stenografii. Modyfikując powyższy przykład, byłoby to: background: url (IMAGE_URL) no-repeat left left top, [odpowiedni gradient];
RussellUresti

14
@adardesign: background: url ("../ images / icon.png") no-repeat 15px center, -moz-linear-gradient (center top, #FFFFFF, #DDDDDD); / * zauważ 15px center, doda 15-krotnie wyściełane lewe wypełnienie i wyśrodkuj pionowo w środku the icon.png * /
Julien Bérubé

2
przynajmniej w chrome możesz kontrolować pozycję tła dla wielu obrazów za pomocą śpiączki do oddzielania wartości .. w ten sposób .. pozycja tła: 0px 8px, 0px 0px ...
Orlando

1
Prawdopodobnie warto również zauważyć, że jeśli chcesz ustalić położenie innych atrybutów obrazu, możesz użyć właściwości css tła później w regule css. Np .: powtórzenie w tle: powtórzenie w tle; pozycja tła: środek; rozmiar tła: 1300px 1303px;
Phill Healey,

86

Jeśli chcesz również ustawić położenie tła dla swojego obrazu, możesz użyć tego:

background-color: #444; // fallback
background: url('PATH-TO-IMG') center center no-repeat; // fallback

background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10

lub możesz również utworzyć MNIEJSZY mixin (styl bootstrap):

#gradient {
    .vertical-with-image(@startColor: #555, @endColor: #333, @image) {
        background-color: mix(@startColor, @endColor, 60%); // fallback
        background-image: @image; // fallback

        background: @image, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
        background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
        background: @image, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
        background: @image, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
        background: @image, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    }
}

Jedyny na tej stronie, który działał dla mnie. Użyłem go jednak z normalnym CSS. Wszystkie inne, których próbowałem, faktycznie ukrywały obraz w kolorze gradientu nakładki.
Ska

@Ska - W takim razie po prostu odwróć kolejność. Z-index działa tutaj w drugą stronę. Zobacz stackoverflow.com/questions/14915542/… .
Frank Conijn,

46

Należy zdać sobie sprawę, że pierwszy zdefiniowany obraz tła jest najwyższy na stosie. Ostatni zdefiniowany obraz będzie najniższy. Oznacza to, że aby uzyskać gradient tła za obrazem, potrzebujesz:

  body {
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
  }

Możesz także zdefiniować pozycje tła i rozmiar tła dla obrazów. Złożyłem post na blogu o ciekawych rzeczach, które możesz zrobić z gradientami CSS3


2
Odpowiedź byłaby jeszcze lepsza, kiedy notacja standardów W3C dobiega końca.
Volker E.

4
Ten kod nie działa poprawnie, kolega. widzimy tylko obraz stackOverflow, a nie obraz tła za / przed nim.
Lub A.

Myślę, że -webkit-gradient może być przestarzały stackoverflow.com/questions/10683364/...
alpalalpal 28.12.2016

Kod może nie działać, ale jest to bardzo ważny punkt. Możesz zmienić kolejność działania elementów tła, ale musisz pomyśleć o ich warstwowaniu. Jeśli chcesz gradient na górze obrazu, umieść go na pierwszym miejscu i prawdopodobnie będziesz chciał nam RGBa, abyś mógł zobaczyć obraz z tyłu:background-image: linear-gradient(rgba(22,22,22,0), rgba(22,22,22,0.6)), url('image.jpg');
serraosays

34

możesz po prostu wpisać:

background: linear-gradient(
    to bottom,
    rgba(0,0,0, 0),
    rgba(0,0,0, 100)
  ),url(../images/image.jpg);


1
To było jedyne rozwiązanie, które działało dla mnie (Firefox v57). linear-gradient()Musiał przyjść przed url()i częściową przezroczystość musiały zostać wykorzystane do gradient kolorów, używając rgba(). Wszystko inne po prostu używało pierwszej definicji na liście (tak jakby druga była rezerwowa, podobnie jak font-familydziałają deklaracje).
waldyrious,

@waldyrious zauważ, że użytkownik chce zastosować rodzaj lekkiej przezroczystej tekstury na gradiencie liniowym, więc obraz powinien być na pierwszym miejscu, ponieważ powinien być renderowany ponad gradientem
Alex Guerrero

Komponowanie obrazu i gradientu za pomocą półprzezroczystości powinno mieć ten sam efekt, niezależnie od tego, który z nich jest z przodu. Zawsze możesz jednak zdefiniować gradienty, aby uzyskać pewną przezroczystość, ale obrazów, które nie są jeszcze półprzezroczyste, nie można łatwo / dynamicznie przekonwertować w celu użycia w ten sposób. Dlatego uważam, że podejście stawianie gradientu na pierwszym miejscu jest ogólnie bardziej przydatne.
waldyrious

21

Zawsze używam następującego kodu, aby działał. Jest kilka notatek:

  1. Jeśli umieścisz adres URL obrazu przed gradientem, obraz zostanie wyświetlony powyżej gradientu zgodnie z oczekiwaniami.

.background-gradient {
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  height: 500px;
  width: 500px;
}
<div class="background-gradient"></div>

  1. Jeśli umieścisz gradient przed adresem URL obrazu, obraz zostanie wyświetlony pod gradientem.

.background-gradient {
  background: -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  width: 500px;
  height: 500px;
}
<div class="background-gradient"></div>

Ta technika jest taka sama, ponieważ mamy wiele obrazów tła, jak opisano tutaj


Świetny! Pogrubiłem to -> Jeśli umieścisz gradient przed adresem URL obrazu, obraz zostanie wyświetlony pod gradientem.
aldyahsn

19

moje rozwiązanie:

background-image: url(IMAGE_URL); /* fallback */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);

3
To rozwiązanie działa w moim przypadku na gradientach na obrazie, w przeciwnym razie zostanie ukryte przez obraz.
vizFlux,

15

Miałem implementację, w której musiałem pójść o krok dalej i chciałem nakreślić swoją pracę. Poniższy kod robi to samo, ale używa SASS, Bourbon i duszka obrazu.

    @mixin sprite($position){
        @include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2));
    }
    a.button-1{
        @include sprite(0 0);
    }
    a.button-2{
       @include sprite (0 -20px);  
    }
    a.button-2{
       @include sprite (0 -40px);  
    }

SASS i Bourbon zajmują się kodem przeglądarki, a teraz wszystko, co muszę zadeklarować, to pozycja duszka na przycisk. Łatwo jest rozszerzyć tę zasadę dla stanów aktywnych i najechania kursorem.


5

Jeśli masz dziwne błędy podczas pobierania obrazów tła, skorzystaj z narzędzia do sprawdzania linków W3C: https://validator.w3.org/checklink

Oto nowoczesne miksy, których używam (napisy: PSA: nie używaj generatorów gradientów ):

.buttonAkc
{
    .gradientBackground(@imageName: 'accept.png');
    background-repeat: no-repeat !important;
    background-position: center right, top left !important;
}

.buttonAkc:hover
{
    .gradientBackgroundHover('accept.png');
}

.gradientBackground(@startColor: #fdfdfd, @endColor: #d9d9db, @imageName)
{
    background-color: mix(@startColor, @endColor, 60%); // fallback
    background-image: url("@{img-folder}/@{imageName}?v=@{version}"); // fallback
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, -webkit-linear-gradient(top, @startColor 0%, @endColor 100%) no-repeat scroll left top; // Chrome 10-25, Safari 5.1-6
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, linear-gradient(to bottom, @startColor 0%, @endColor 100%) no-repeat scroll left top;
}

.gradientBackgroundHover(@imageName)
{
    .gradientBackground(#fdfdfd, #b5b6b9, @imageName);
}

4

Oto MIESZANKA, którą utworzyłem, aby obsłużyć wszystko, czego ludzie mogą chcieć użyć:

.background-gradient-and-image (@fallback, @imgUrl, @background-position-x, @background-position-y, @startColor, @endColor) {
    background: @fallback;
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat; /* fallback */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-gradient(linear, left top, left bottom, from(@startColor) @background-position-x @background-position-y no-repeat, to(@endColor)); /* Saf4+, Chrome */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); /* Chrome 10+, Saf5.1+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,    -moz-linear-gradient(top, @startColor, @endColor); /* FF3.6+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,     -ms-linear-gradient(top, @startColor, @endColor); /* IE10 */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,      -o-linear-gradient(top, @startColor, @endColor); /* Opera 11.10+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,         linear-gradient(top, @startColor, @endColor); /* W3C */
}

Można to wykorzystać w następujący sposób:

.background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2);

Mam nadzieję, że uznasz to za pomocne.

Podziękowania dla @Gidgidonihah za znalezienie wstępnego rozwiązania.


3

Próbowałem zrobić to samo. Podczas gdy kolor tła i obraz tła istnieją na osobnych warstwach w obiekcie - co oznacza, że ​​mogą one współistnieć - gradienty CSS wydają się kooptować warstwę obrazu tła.

Z tego, co mogę powiedzieć, obraz obramowania wydaje się mieć szersze wsparcie niż wiele środowisk, więc może to jest alternatywne podejście.

http://articles.sitepoint.com/article/css3-border-images

AKTUALIZACJA: Trochę więcej badań. Wygląda na to, że Petra Gregorova coś tu działa -> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html


2

Możesz użyć wielu tła: linear-gradient (); połączeń, ale spróbuj tego:

Jeśli chcesz, aby obrazy były całkowicie połączone ze sobą w miejscu, w którym nie wygląda na to, aby elementy ładowały się osobno z powodu oddzielnych żądań HTTP, skorzystaj z tej techniki. Tutaj ładujemy dwie rzeczy do tego samego elementu, które ładują się jednocześnie ...

Upewnij się tylko, że najpierw przekonwertowałeś wstępnie renderowany 32-bitowy przezroczysty obraz / tekst png na ciąg base64 i użyjesz go w wywołaniu css obrazu-tła (w tym przykładzie zamiast INSERTIMAGEBLOBHERE).

Użyłem tej techniki do stopienia tekstury waflowej i innych danych obrazu, które są serializowane przy użyciu standardowej reguły css przezroczystości rgba / gradientu liniowego. Działa lepiej niż nakładanie warstw wielu grafik i marnowanie żądań HTTP, co jest złe dla urządzeń mobilnych. Wszystko jest ładowane po stronie klienta bez operacji na plikach, ale zwiększa rozmiar bajtu dokumentu.

 div.imgDiv   {
      background: linear-gradient(to right bottom, white, rgba(255,255,255,0.95), rgba(255,255,255,0.95), rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.85), rgba(255,255,255,0.8) );
      background-image: url("data:image/png;base64,INSERTIMAGEBLOBHERE");
 }

0

Jeśli chcesz, aby gradienty i obrazy tła działały razem w IE 9 (HTML 5 i HTML 4.01 Strict), dodaj następującą deklarację atrybutu do swojej klasy css i powinno to załatwić sprawę:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000', endColorstr='#ff00ff'), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE_URL]', sizingMethod='crop');

Zauważ, że używasz filteratrybutu i że progid:[val]przed zamknięciem wartości atrybutu średnikiem istnieją dwa wystąpienia oddzielone przecinkiem. Oto skrzypce . Zauważ również, że gdy spojrzysz na skrzypce, gradient wystaje poza zaokrąglone rogi. Nie mam poprawki dla tego, że nie używa zaokrąglonych rogów. Zauważ też, że gdy używasz ścieżki względnej w atrybucie src [IMAGE_URL], ścieżka jest względna do strony dokumentu, a nie do pliku css (Zobacz źródło ).

Ten artykuł ( http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ ) doprowadził mnie do tego rozwiązania. Jest to dość pomocne w CSS3 specyficznym dla IE.


0

Chciałem zrobić przycisk zakresu z obrazem tła, kombinacją gradientu tła.

http://enjoycss.com/ pomógł wykonać moje zadanie. Tylko ja muszę usunąć niektóre automatycznie generowane dodatkowe CSS. Ale to naprawdę fajna strona, z której możesz zbudować swoją pracę.

#nav a.link-style span {
    background: url("../images/order-now-mobile.png"), -webkit-linear-gradient(0deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), -moz-linear-gradient(90deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), linear-gradient(90deg, rgba(170,31,0,1) 0, rgba(214,18,26,1) 51%, rgba(170,31,0,1) 100%);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 8px;
    border: 3px solid #b30a11;
}

0

W ten sposób rozwiązuję problem. Gradient definiuję w HTML i obrazie tła w treści

html {
  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0.31, rgb(227, 227, 227)), color-stop(0.66, rgb(199, 199, 199)), color-stop(0.83, rgb(184, 184, 184)));
  background-image: -moz-linear-gradient(left bottom, rgb(227, 227, 227) 31%, rgb(199, 199, 199) 66%, rgb(184, 184, 184) 83%);
  height: 100%
}
body {
  background: url("http://www.skrenta.com/images/stackoverflow.jpg");
  height: 100%
}


0

Dla mojego responsywnego projektu moja rozwijana strzałka w dół po prawej stronie pudełka (pionowy akordeon) przyjęła procent jako pozycję. Początkowo strzałka w dół brzmiała „pozycja: bezwzględna; prawa: 13px;”. Przy pozycjonowaniu 97% działało to jak urok:

> background: #ffffff;
> background-image: url(PATH-TO-arrow_down.png); /*fall back - IE */
> background-position: 97% center; /*fall back - IE */
> background-repeat: no-repeat; /*fall back - IE */
> background-image: url(PATH-TO-arrow_down.png)  no-repeat  97%  center;  
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);<br />
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); 

PS Przepraszamy, nie wiem jak obsługiwać filtry.


-1

Jako pewny sposób metody, możesz po prostu zrobić obraz tła, który na przykład 500 x 5 pikseli css:

background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;

Gdzie xxxxxxodpowiada kolorowi, który pasuje do końcowego koloru gradientu.

Można to również naprawić na dole ekranu i ustawić tak, aby pasował do początkowego koloru gradientu.


1
-1 ponieważ: Po pierwsze, „background-img” nie jest prawidłową regułą CSS. Po drugie, to nie odpowiada na pytanie.
Chris Browne
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.