CSS tworzenie teksturowanych tła

W CSS użytkownicy mogą stosować różne właściwości, aby umieścić tło elementu. Ponadto CSS pozwala użytkownikom dodać teksturowany obraz jako tło elementu. „„zdjęcie w tle„Właściwość służy do ustawiania jednego lub więcej obrazów jako obrazów tła. Natomiast "powtarzanie tła„Właściwość CSS sprawia, że ​​obraz tła powtarza się i teksturował.

W tym samouczku zilustrujemy metodę tworzenia teksturowanego tła.

Jak tworzyć teksturowane tło za pomocą CSS?

Postępuj zgodnie z procedurą utworzenia teksturowanego tła, wykorzystując CSS.

Krok 1: Utwórz kontener Div

W dokumencie HTML utwórz proste „„Element z nazwą klasy„T-background".

Krok 2: Dodaj sekcję

Następnie dodaj „”Tag wraz z„styl”Atrybut i ustaw styl jako„Wyświetlacz: Flex". Ta właściwość jest wykorzystywana do ustawiania układu lub długości elastycznych elementów lub elementów.

Krok 3: Zrób kolejny div

W środku "„Pojemnik, wstaw kolejne dwa elementy wraz z„Tekstura-1" I "Tekstura-2„Zajęcia odpowiednio:

Krok 4: Dostęp do elementów klasowych

W sekcji CSS uzyskaj dostęp do obu „div„Kontenery posiadające zajęcia”Tekstura-1" I "Tekstura-2„Za pomocą selektora kropki. Następnie wypróbuj wspomniane właściwości stylizacji CSS:

.Tekstura-1, .tekstura-2
Margines: 50px;
Wysokość: 200px;
szerokość: 200px;
kolor tła: #1ece85;

Tutaj:

• Użyliśmy „margines„Właściwość, aby określić przestrzeń wokół elementu.
• A później "wysokość„Atrybut jest wykorzystywany do przydzielania wysokości elementowi.
• „„szerokość„Własność jest ustalona jako„200px„Aby zdefiniować szerokość elementu.
• "kolor tła„Właściwość CSS przydziela kolor dla tła elementu.

Wynikowy obraz opisuje dane wyjściowe powyższego kodu:

Krok 5: Utwórz tło jako teksturowane

Teraz zastosuj następujące właściwości CSS, aby skręcić w tle teksturowany:

.tekstura-1
Image tła: powtarzający się liniowy gradient (36DEG, RGBA (255, 253, 253, 0.1), RGBA (255,255 255, 0.1) 1px, przezroczysty 0px, przezroczysty 2px);

Najpierw użyj „.Teksturowany-1„Klasa, aby uzyskać dostęp do pierwszego elementu i zastosować różne właściwości:

• "zdjęcie w tle„Właściwość służy do ustawienia obrazu z tyłu elementu.
• "Powtarzający się liniowy gradient”To funkcja używana do ustawienia obrazu tła. Ta funkcja CSS sprawia, że ​​obraz składa się z powtarzających się gradientów liniowych.
• Następnie ustaw kąt jako „36 stopnie”W celu powtarzania stopni przechylonych gradientowych.
• Następnie określ kolor dla powtarzającego się liniowego gradientu jako „RGBA (255, 253, 253, 0.1)" I "RGBA (255 255 255, 0.1) 1px".
• Na koniec dodaj przejrzystość do obrazu tła.

Zastosujmy tło tekstur na drugie miejsce ””:

.tekstura-2
Image tła: URL (/liście.png);
powtórzenie tła: powtórz;

Teraz dostęp do drugiego „" za pomocą ".Tekstura-2". Następnie zastosuj „zdjęcie w tle”Właściwość i ustaw obraz, wykorzystując adres URL tego obrazu. Potem „„powtarzanie tła”Atrybut służy do powtórzenia obrazu na tylnym miejscu.

Wyjście

Można zauważyć, że pomyślnie utworzyliśmy teksturowane tła.

Wniosek

Aby utworzyć teksturowane tła, najpierw utwórz „" pojemnik. Następnie dodaj dwa kolejne „” pojemniki w ten sam sposób i przypisz je klasy. Następnie uzyskaj dostęp do elementów za pomocą ich odpowiednich klas i zastosuj „zdjęcie w tle" I "powtarzanie tła" nieruchomości. Ten post wyjaśnił procedurę tworzenia teksturowanych tła.