CSS obraca tło
Przykład nr 01:
Zacznijmy od tego skryptu HTML z prostym tagiem podstawowym HTML, a następnie znacznika głównego używanego do tytułu strony internetowej za pomocą znacznika „tytułu”. Korpus znacznika HTML został pokryty różnymi elementami, takimi jak Div i Etykiety. W tym skrypcie HTML mamy dwa główne elementy div. W obu głównych elementach Div mamy również dwoje dzieci „div”, które są określone przez dwie różne klasy A i B. Oba wewnętrzne znaczniki div używają elementu „etykieta” do oznaczania niektórych tekstów w „Div” i określania Div jako normalnej lub obrotowej. Obie etykiety dostały granicę 1px w stylu przerywanym, podczas gdy pierwsza etykieta DIV byłaby niebieska, a druga była czerwona.
Kiedy spojrzymy na tag stylu, dowiedzieliśmy się, że zarówno wewnętrzne sekcje „Div” są stylizowane osobno za pomocą ich odpowiednich klas: A i B. Oba elementy DIV używają tego samego obrazu tła z systemu bez powtarzania tła, tej samej wysokości i tej samej szerokości: 120px i 30px. Podczas gdy druga wewnętrzna div również zawierałaby dodatkową stylistykę. Użyliśmy właściwości marginesu, aby umieścić tę sekcję Div 100px z dala od góry strony HTML i obróciliśmy ją o 90 stopni w prawo za pomocą właściwości transformacji.
Następnie obróciliśmy go o 45 stopni w przeciwnym kierunku od miejsca, w którym się zaczął. Zapiszmy i uruchommy teraz ten skrypt.
Poniższe dane wyjściowe pokazuje wyraźną reprezentację powyższego kodu HTML. Pierwsza sekcja DIV zawiera obraz z etykietą bez żadnego obrotu i nie powtórzono tła. Druga sekcja DIV zawierała obraz i etykietę, podczas gdy został najpierw obrócony o 90 stopni, a następnie wypaczony, tłumacząc i skalując 45 stopni w kierunku pierwotnej pozycji.
Przykład nr 02:
W powyższym przykładzie obróciliśmy sekcje DIV wraz z ich obrazami tła i zawieranymi etykietami. Teraz będziemy patrzeć na użycie różnych właściwości do obracania obrazu tła z jego tekstem na stronie HTML i bez. Korpus tej strony HTML został wypełniony nagłówkiem rozmiaru 1 i 4 różnych sekcji DIV z niektórymi tekstami. Wszystkie te 4 Divy zostały określone z różnymi identyfikatorami i klasami, aby stylizować je osobno: „RotateImageOnly” ID dla pierwszej klasy „ROTATE” dla drugiej klasy „Rotatetranslate” dla trzeciej sekcji Div i klasy „Translaterotate” dla czwartej sekcji div. W elemencie tagu stylu używamy elementu div w tym samym stylu dla wszystkich 4 elementów dla niektórych właściwości. Tak więc określamy położenie bezwzględne, 40px lewą wyściółkę, 100px górną wyściółkę, szerokość i wysokość 100px dla wszystkich, a obraz tła byłby taki sam dla wszystkich.
Podczas gdy używaliśmy identyfikatora pierwszego div w tym stylu, aby zmienić jego pozycję na względną, zmieniając szerokość i wysokość i lewe margines. Obraz tła dla pierwszej div nie zostałby zastąpiony, a starszy zostanie użyty. Obraz tła dla tej sekcji div zostałby obrócony o 45 stopni bez tłumaczenia lub obracania tekstu. Po tym wszystkie trzy sekcje DIV zastąpiłyby nowy obraz tła.
Druga sekcja DIV została przedstawiona 2px przerywana, obrócone 45 stopni jej tekst zostanie również przetłumaczony o 200 pikseli. Trzecie obraz tła sekcji DIV został obrócony o 90 stopni wraz z tekstem, podczas gdy czwarta sekcja Div została obrócona o 180px wraz z tekstem.
Wyjście tego skryptu HTML pokazuje w sumie 4 Divy z obrazami tła. Pierwsza DIV używa różnych obrazów tła, podczas gdy inne zastępują nowe obrazy. Obraz tła pierwszej sekcji Div został obrócony do 45 stopni, podczas gdy jego tekst nie został obrócony.
Obraz tła dla drugiego div obrócił się do 45 stopni, podczas gdy jego tekst został przetłumaczony na 200 pikseli. Obraz tła dla trzeciej sekcji div został obrócony do 90 stopni wraz z tekstem. W ten sposób obraz tła dla czwartej sekcji został obrócony do 180 stopni, a jego tekst został przetłumaczony na 180 pikseli.
Przykład nr 03:
Zacznijmy od ostatniego przykładu tego artykułu, aby użyć niektórych właściwości CSS na obrazach tła niektórych elementów strony internetowej HTML. Najpierw przyjrzymy się korpusowi strony HTML. W obrębie znacznika dla tej strony HTML używamy jedynego nagłówka o rozmiar 1. Nie ma nic do zrobienia na znaczniku ciała, więc przyjrzymy się znaczniku stylu strony HTML. W obrębie znacznika kodu HTML znajduje się znacznik tytułowy, który został użyty do tytułu „transformacja obrazu tła”.
Ten styl został zapoczątkowany przy użyciu elementów ciała. Do stylizacji używamy właściwości obrazu tła, aby dodać obraz jako tło. Ustawiamy tło na bez powtórzenia, aby obraz tła nie można było powtórzyć na stronie internetowej HTML. Również właściwość przywiązania tła jest używana do naprawy obrazu tła, a przepływ tekstu został użyty do odziedziczenia ogólnych właściwości treści na całej stronie. Kolejny element ciała został użyty z atrybutem After do utworzenia innego obrazu tła o położeniu bezwzględnej: górne marginesy 10%, lewy margines 30%, szerokość i wysokość 300 pikseli wraz z tym samym obrazem tła zawierającym krycie 0.5.
Promień dla granicy tego obrazu został ustawiony na 50%. Oznacza to, że ten obraz zostanie pokazany w okręgu. Ponadto jego obraz tła zostanie obrócony o 45 stopni i nie zastosowano właściwości powtarzania tła.
Wyjście pokazuje, że pierwszy obraz tła jest wyświetlany po prostu bez żadnego obrotu, bez tłumaczenia i bez powtarzania. Podczas gdy drugi obraz tła został obrócony o 45 stopni z promieniem 50%, a obraz tła jest powtarzany wiele razy, jak pokazano na poniższym obrazku.
Wniosek
Ten artykuł stanowi użycie różnych właściwości CSS do obracania obrazów tła dowolnej strony HTML do określonych stopni. Przykłady HTML zostały próbowane w celu wykorzystania tych interesujących właściwości CSS w bardzo prosty i wyjątkowy sposób. W tych przykładach wykorzystaliśmy właściwość obrazu tła, właściwość powtarzania tła, właściwość przywiązania tła, właściwość tekstu, zawartość, pozycja, właściwość promieniowania granicznego, transformację, nieprzezroczystość i różne właściwości szerokości/wysokości, aby osiągnąć Wymagane wyjście do obracania tła.