Rozciągnij obraz tła CSS?
Ten samouczek pokaże, jak rozciągnąć obrazy tła za pomocą CSS.
Jak rozciągnąć obraz tła za pomocą CSS?
Aby rozciągnąć obraz tła za pomocą CSS, wypróbuj dane instrukcje.
Krok 1: Utwórz First Div Container
Najpierw dodaj „div”Pojemnik przy użyciu„”Oznacz i przypisz to„ID”Atrybut wewnątrz pojemnika.
Krok 2: Dodaj nagłówek
Dodaj nagłówek za pomocą „„Tag w dokumencie HTML. „„
”Tag służy do osadzenia nagłówka poziomu pierwszego poziomu.
Krok 3: Zrób drugi kontener DIV
Następnie stwórz kolejne „”Pojemnik wraz z„klasa”Atrybut, dodaj znacznik nagłówka„”I osadzaj nagłówek. Następnie dodaj kolejny „”, postępując zgodnie z tą samą procedurą:
Rozmiar tła: Okładka:
Rozmiar tła: 100% auto:
Krok 4: Pierwsza klasa kontenera stylu
Tutaj uzyskaj dostęp do elementu „” z klasą „IMG-1" z pomocą ".”Selektor i zastosuj następujące właściwości CSS:
granica: 3px stały RGB (240, 12, 12);
szerokość: 500px;
Wysokość: 200px;
Tło: URL (emoji.png);
Rozmiar tła: okładka;
Tutaj:
- „„granica„Właściwość ustawia granicę wokół elementu.
- "szerokość”Określa rozmiar elementu poziomo.
- "wysokość”Określa rozmiar elementu pionowo.
- "tło”Jest wykorzystywany do przydzielania koloru tła elementu.
- "Rozmiar tła„Nieruchomość z„okładka„Wartość jest używana jako rozmiar tła, który skaluje obraz do wypełnienia pojemnika:
Krok 5: Stylowa klasa kontenera
Uzyskaj dostęp do drugiego kontenera Div, wykorzystując nazwę klasy „.IMG-2”I zastosuj podane wymienione właściwości:
granica: 3px Solid RGB (226, 17, 17);
Szerokość: 500px;/ * Szerokość ekranu */
Wysokość: 200px;/ * Wysokość ekranu */
Tło: URL (emoji.png);
Powtórzenie tła: bez powtórzenia;
Rozmiar tła: 100% auto;
W powyższym bloku:
- „„powtarzanie tła„Właściwość jest wykorzystywana do powtarzania obrazu wzdłuż osi poziomej i pionowej. Tutaj wartość jest ustawiona jako „bez powtórki”Za nie powtarzanie obrazu.
- A później "Rozmiar tła”Jest ustawiony jako„100% auto".
Wyjście
Można zauważyć, że pomyślnie rozciągnęliśmy obraz tła za pomocą CSS.
Wniosek
Aby rozciągnąć obraz tła, najpierw skorzystaj z „tło„Właściwość, aby ustawić obraz tła dla elementu wraz z wartością jako„URL". Następnie użyj właściwości CSS „Rozmiar tła" Jak "okładka" Lub "100% auto„Aby rozciągnąć obraz. Ten post nauczył Cię, w jaki sposób CSS rozciąga obraz tła.