Okrągły obraz CSS

Korzystanie z obrazów jest bardzo ważne w kodzie HTML, zwłaszcza gdy pracujesz nad projektem strony internetowej zawierającej wiele zdjęć przesuwających się na stronie głównej lub innych stronach. Do użycia obrazów w języku skryptowym HTML zwykle używamy w nim znacznika „IMG”. Te obrazy można ustawić na ich oryginalne rozmiary lub rozmiar można również zmienić pod względem wysokości i szerokości. Oprócz tego język HTML zapewnia właściwość „promieniowania granicznego”, aby zmienić promień dowolnego elementu, takiego jak nagłówek lub obraz. W przypadku obrazów zmieni kształt narożnika obrazu z jednego na inny. W tym artykule będziemy rozważać użycie właściwości Radiusza Border do konwersji obrazu na zaokrąglony. Będziemy patrzeć na obraz, który zostanie wykorzystany w kodach HTML, aby kształtować go wokół kodu Visual Studio. Możesz zobaczyć obraz o nazwie „Nowy.png ”przymocowany na zrzucie ekranu poniżej. Użyjemy go w naszym kodzie Visual Studio, aby to zrobić.

Przykład 01:

Przed kształtowaniem obrazu do okrążenia musimy zobaczyć, w jaki sposób można włożyć obraz na stronę HTML bez zmiany oryginalnego kształtu. Więc będziemy używać „nowego.obraz png ”w tym kawałku kodu HTML. Utworzyliśmy nowy plik HTML w naszym bieżącym katalogu Windows i nazwaliśmy go „CSS”. Następnie otworzyliśmy go w kodzie Visual Studio i dodaliśmy poniższy skrypt HTML. Ten skrypt został rozpoczęty od standardowego znacznika HTML „DocType”, a następnie pojedynczego znacznika „HTML”. Tag HTML pokazuje, że będzie to strona internetowa oparta na HTML, a znacznik HTML zostanie zamknięty po wszystkich tagach na końcu.

Po znaczniku HTML mamy dwa najbardziej podstawowe i najczęściej używane tagi plików HTML: Głowa i nadwozie. Główny znacznik zawiera informacje dotyczące tytułu nagłówka i stylizacji. Podczas gdy znacznik ciała będzie zawierał wszystkie dane, pojemniki i inne elementy za pomocą innych znaczników. W tej chwili pozostawiliśmy etykietę głowy pustą i dodaliśmy znacznik nagłówka o rozmiarze „2” i obraz „IMG” w znaczniku „ciała”. Tag nagłówka służy do po prostu umieszczenia nagłówka na początku strony internetowej HTML, podczas gdy znacznik obrazu został użyty do wstawienia nowego.Obraz PNG na stronie internetowej za pomocą zmiennej „SRC”.

Używaliśmy również znacznika „stylu” w znaczniku „IMG”, aby ustawić szerokość „200 pikseli” obrazu za pomocą właściwości „szerokości” obrazu. Ciało i tagi HTML zostały tutaj zamknięte.

Zapiszmy nasz kod w pliku za pomocą Ctrl+S i debuguj go za pomocą przycisku „Uruchom” na pasku zadań kodu Visual Studio. Poprosi Cię o platformę przeglądarki, na której chcesz ją wykonać. Wybraliśmy Chrome, aby go uruchomić. Wyjście zostało pokazane poniżej. Strona internetowa HTML pokazuje czarny nagłówek rozmiaru 2. Obraz został wyświetlony z oryginalnym kształtem o innym rozmiarze. Szerokość równa się 200 pikseli jako ustawiona w właściwości stylu.

Spójrzmy na kształtowanie naszego obrazu „okrągłego” w tym samym kodzie HTML. W tym celu musimy otworzyć ten sam plik HTML w kodzie Visual Studio i zaktualizować go. Jak wiecie, wprowadzanie zmian w dowolnym kształcie obrazu leży w sekcji stylistycznej. Musimy więc użyć stylizacji CSS w tym samym kodzie HTML za pomocą znacznika „stylu” w nagłówku lub znaczniku „głowy”. Reszta kodu pozostanie nienaruszona i nie będzie aktualizowana.

Teraz, w obrębie znacznika „stylu” tego nagłówka kodu, musimy wspomnieć o nazwie elementu do aktualizacji (i.mi., tag „IMG”.) Dodaj nawiasy kręcone i zacznij dodawać właściwości, aby zmienić element zgodnie z potrzebami. Tak więc używamy właściwości „promieniowania granicznego” w kręconych nawiasach „IMG” znacznika do stylizacji i określając jej wartość jako 50 procent. Możesz także dodać piksele w porównaniu z procentem, jeśli chodzi o wybór jednostki dla dowolnej wartości numerycznej w stylizacji CSS. Chodzi o zmianę. Najpierw zapiszmy ten kod. Po zapisaniu tego kodu za pomocą CTRL+S musimy po prostu uruchomić go za pomocą przycisku „Uruchom” z paska zadań kodu Visual Studio. Ponownie musisz wybrać przeglądarkę, w której chcesz wyświetlać dane wyjściowe.

Uruchomienie tego kodu doprowadziłoby nas do wyjścia, jak pokazano poniżej. Zastosowanie wartości właściwości promieniowania granicznego do 5 procent sprawia, że ​​obraz „nowy.png ”do okrągłego. Krawędzie byłyby zaokrąglone, jak pokazano na poniższym obrazku. Chodzi o użycie właściwości Radiusza Border do konwersji prostego obrazu kwadratowego na zaokrąglony kształt lub jakikolwiek inny kształt.

Przykład 02:

Ta sama właściwość może być używana na inne sposoby do zmiany kształtu obrazu. W tym przykładzie zobaczymy, w jaki sposób losowe wartości mogą zmienić kształt prostego obrazu. Tak więc, w obrębie znacznika tego skryptu HTML, użyliśmy znacznika „IMG” 4 razy. We wszystkich tych 4 tagach używaliśmy tego samego „nowego.Obraz PNG ”wielokrotnie o szerokości 200 pikseli dla każdego kształtu.

Ponadto, aby osobno zmienić kształt obrazów w stylu, musimy określić je z różnymi klasami: A, B, C i D, jak pokazano w każdym znaczniku „IMG”. W obrębie znacznika stylu używamy tagów „IMG” wraz z ich określonymi klasami (A, B, C i D), aby zmienić zakątki każdego kształtu osobno. Wartości 50%, 0%, 20%i 250%15%zostały użyte odpowiednio dla zdjęć 1, 2., 3. i 4. Wykonajmy ten kod, aby zobaczyć wyniki.

Wygenerowano 4 różne kształty jednego obrazu, jak pokazano poniżej.

Te same lub podobne kształty można osiągnąć za pomocą prostej właściwości promieniowania granicznego przy użyciu 4 bocznych wartości na raz: lewy górne, prawe górne, lewne dolne i dolne, jak pokazano poniżej. Wypróbowaliśmy tę prostą właściwość promieniowania granicznego dla 4 zakrętów wraz z właściwością szerokości i wysokości obrazów ustawionych na 150 pikseli dla wszystkich. Zapiszmy i uruchommy ten kod.

Korzystając z prostego formatu dla nieruchomości Radiusza Border, mamy kształty Phise-Beelow 4 dla jednego „nowego.Obraz png ”.

Wniosek:

Zastosowanie i znaczenie znacznika „IMG” zostały omówione wraz z użyciem właściwości granicznego Radiusa. Omówiliśmy, w jaki sposób właściwość promieniowania granicznego może zmieniać krawędzie dowolnego obrazu lub kierować się do różnych kształtów z prostymi wartościami górnymi, dół, lewym i prawym. W tym celu omówiliśmy bardzo proste i podstawowe przykłady skryptu HTML za pomocą jednego obrazu w znaczniku „IMG” i stylizację. Osiągnęliśmy nasz cel, przekształcając obraz w kształt kwadratowy, okrągły, owalny i zaokrąglony.