Príloha na pozadí - Triky CSS

Anonim

background-attachmentMajetok CSS Určuje, ako sa pohybovať na pozadí vzhľadom k výrezu.

Existujú tri hodnoty: scroll, fixeda local. Najlepšie to vysvetlíte pomocou ukážky (skúste posúvať jednotlivé pozadia):

Prečítajte si ukážku prílohy pera od Timothy Millera (@tjacobdesign) na serveri CodePen.

Keď už hovoríme o, musíte myslieť na dva rôzne pohľady background-attachment: hlavné (okno prehliadača) a lokálne (môžete to vidieť v ukážke vyššie).

scrollje predvolená hodnota. Posúva sa s hlavným zobrazením, ale zostáva pevne vo vnútri miestneho zobrazenia.

fixedzostane fixný nech sa deje čokoľvek. Je to niečo ako fyzické okno: pohyb po okne zmení vašu perspektívu, ale nezmení sa to ani tam, kde sú veci mimo okna.

localbol vynájdený, pretože predvolená scrollhodnota funguje ako pevné pozadie. Posúva sa v hlavnom aj miestnom zobrazení. Môžete s tým urobiť niekoľko skvelých vecí.

Súvisiace

  • klip na pozadie
  • farba pozadia
  • obrázok na pozadí
  • pôvod pozadia
  • Pozícia na pozadí
  • opakovanie pozadia
  • veľkosť pozadia

Ďalšie zdroje

  • CSS3 Spec
  • MDN

Podpora prehľadávača

Hodnoty fixeda scrollsú podporované všade, aj keď fixedv mobilných zariadeniach sa môžu správať zvláštne. localmá túto podporu prehliadača:

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome Firefox IE Hrana Safari
4 25 9 12 5

Mobil / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4,2-4,3 14.0-14.4

Chrome-on-Android podporuje local, ale starý prehliadač Android nie.