W HTML/CSS użytkownik może dodać różne elementy, a osadzanie obrazów jest jednym z nich. Mogą również zastosować różne właściwości CSS, aby strony internetowe są bardziej atrakcyjne, takie jak obracające się obrazy tła, stosowanie granic, ustawianie krycia strony i wiele innych. CSS zapewnia również „przekształcać„Właściwość, która jest wykorzystywana do zastosowania transformacji wielowymiarowej do elementu.

Ten samouczek ilustruje:

• Jak dodać obraz w pojemniku?
• Jak obrócić obraz tła w pojemniku?

Jak dodać obraz w pojemniku?

Aby dodać obraz do kontenera, przejrzyj wymienione kroki.

Krok 1: Wstaw nagłówek

Najpierw dodaj nagłówek za pomocą „

„Tag na stronie HTML. Następnie wstaw „wyrównywać„Wartość atrybutu do ustawienia wyrównania nagłówka w środku.

Krok 2: Utwórz kontener Div

Następnie stwórz „„Kontener i przydziel atrybuty klasy„ Container ”i„ Wyrównaj ”.

Krok 3: Dodaj obraz w pojemniku Div

Następnie wstaw „„”Tag wraz z następującymi atrybutami:

• „„src”Atrybut określa adres URL pliku multimedialnego.
• "Alt”Jest wykorzystywany do definiowania tekstu dla określonego obszaru, jeśli obraz nie jest wyświetlany.
• "szerokość„Przydziela szerokość obrazu.
• "wysokość”Atrybut określa wysokość obrazu.
• "styl”Służy do określenia stylizacji CSS, w tym obramowania i koloru dla elementów:

Obraz HTML

Wyjście

Jak obrócić obraz tła w pojemniku?

Wypróbuj instrukcje podane poniżej w celu obracania obrazu w pojemniku.

Krok 1: Pojemnik dostępu

W CSS najpierw dostęp do „Container obrazu„Klasa za pomocą selektora kropki.

Krok 2: Obróć obraz „30” stopni

Po uzyskaniu dostępu do „”Pojemnik zastosuj następujące właściwości CSS:

.Image-Container
Transform: Rotate (30Deg);
Szerokość: 30%;
Wysokość: 30%;
Rozmiar tła: okładka;
Margines: 30px;

Tutaj:

• „„przekształcać„Własność jest wykorzystywana do obracania pojemnika. Na przykład funkcja CSS „Obrócić (30 stopni)”Określa transformację, która obraca element w kierunku stałego punktu na płaszczyźnie 2D.
• "wysokość„Własność przydziela wysokość do elementu.
• "Rozmiar tła„Przydziela rozmiar tła elementu.
• "margines”Właściwość ustawia pustą przestrzeń dla elementu po zewnętrznej stronie zdefiniowanego elementu.

Można zauważyć, że obraz jest obracany do 30 stopni pojemnika Div:

Krok 4: Obróć obraz „60” stopni

Aby obrócić obraz na 60 stopni, ustaw wartość „obracać się()”Funkcjonowanie jako„60 stopni”:

Transform: Rotate (60Deg);

Wyjście

Ten post podano procedurę obracania obrazu tła w pojemniku.

Wniosek

Aby obrócić obraz w pojemniku, najpierw utwórz „”I dodaj obraz, wykorzystując„”Tag. Następnie dostęp do klasy, aby zastosować „przekształcać„Właściwość do obracania obrazu o określonej wartości. Użytkownicy mogą zastosować inne właściwości CSS, aby stylizować element, takie jak „wysokość”,„Rozmiar tła", I "margines". Ten post wykazał metodę obracania obrazu w pojemniku.