Powtórzenie tła w CSS

Po ustawieniu obrazu tła na dowolnej stronie internetowej obraz zostanie umieszczony w lewym górnym rogu i będzie powtarzany zarówno w kierunku poziomym, jak i pionowym. CSS zapewnia właściwość powtarzania tła do zarządzania zachowaniem powtarzania obrazu.

Możemy wykonywać następujące funkcje za pomocą właściwości powtarzania tła:

• bez powtórki unika powtórzenia obrazu.
• Powtórz-x powtarza obraz w kierunku poziomym.
• Powtórz-y powtarza obraz w kierunku pionowym.
• przestrzeń powtarza obraz bez przycinania i dodawał przestrzeni między każdym powtórzeniem
• okrągły powtarza i rozciąga obraz bez dodawania miejsca

W tym artykule omówiono wszystkie wyżej wymienione wartości tła-właściciela z przykładami.

Przykład
Zacznijmy od domyślnej właściwości obrazu tła.

Powyższy fragment zapewni następujące dane wyjściowe:

Domyślnie właściwość obrazu tła powtórzyła obraz poziomo, jak i pionowo.

wartość bez powtórzenia

Zobaczmy, co się stanie, gdy wartość „Brak powtórki” zostanie przypisany do właściwości powtarzającej się tła:

Teraz obraz tła pojawi się tylko raz. Ten przykład zawiera następujące dane wyjściowe:

Wartość powtórzeń-X

Teraz przypiszmy „Powtórz-X” do właściwości powtarzania tła i zwróć uwagę, jak to działa:

Obserwujmy wpływ „powtórz-X” na obraz tła w następującym wyjściu:

Z powyższego wyjścia jest jasne „Powtórz-X” powtarza obraz tylko poziomo.

Wartość powtarzająca się

Podobnie przypiszmy Powtórz-y Wartość właściwości powtarzania tła:

Powyższy element kodu wytworzy następujące dane wyjściowe:

Wyjście to weryfikuje Powtórz-y powtórzył obraz tylko pionowo.

wartość przestrzeni

Wykorzystajmy "przestrzeń" Wartość właściwości powtarzania tła, aby dodać równomierne przestrzenie między obrazami:

Powyższy skrypt zapewni następujące dane wyjściowe:

okrągła wartość

Przypisanie wartości „okrągłej” do właściwości powtarzania tła będzie pasować do obrazu zgodnie z rozmiarem ekranu:

W rezultacie otrzymamy następujące dane wyjściowe:

Powtórz wiele obrazu tła

W CSS do elementu można dodać wiele obrazów tła, a poniższy przykład opracuje sposób kontrolowania zachowania powtarzania wielu obrazów za pomocą właściwości powtarzania tła:

W powyższym kodzie właściwość obrazu tła wymaga dwóch adresów URL, aby dodać dwa obrazy tła. W następnym wierszu właściwość powtarzania tła określa również dwie wartości i.mi. Powtórz-y, powtórzenie-x. Powtórz Y powtarza pierwsze zdjęcie pionowo, podczas gdy Repreent-X powtórzy drugi obraz w poziomie:

Wniosek

Właściwość powtarzania tła kontroluje zachowanie powtarzania obrazu tła. Określa, czy obraz tła powtórzy się, czy nie, to jak, ja.mi. pionowo lub poziomo.

Ten zapis zapewnił dokładny przegląd właściwości powtarzania tła w CSS. Po pierwsze, określa, jakie są wartości, które można przypisać do właściwości powtarzania tła. Następnie szczegółowo wyjaśnił działanie każdej wartości powtarzania tła wraz z przykładami.