ПредишенСледващото

Всякакви самите растерни изображения са с правоъгълна форма, така че да се създадат сложни форми в снимки използват прозрачност или фон, което съвпадна с фон на уеб страницата си. Всъщност кръгово изображение може да се направи с помощта на граничен радиус стил свойства. Тези изображения, използвани от страната на рамката, а също така ще бъде кръгла, а не квадрат. Ако вмъкнете картинка в кръгла . референтната областта ще бъде кръг.

За да бъде произволно изображение първия кръг трябва да го превърне в квадрат, а след това да добавите стил граничен радиус имот на стойност от 50% (Пример 1). По-добре е да го зададете като процент, така че не се привързват към размера на картината.

Пример 1. циркуляр Изображение

Резултатът от този пример е показан на фиг. 1.

Кръгла образ, webreference

Фиг. 1. Кръгла изображение

граничен радиус важи и за всички други елементи, така че да можем да създадем един празен квадрат

и да зададете фоново изображение, което е приемливо за мащаба и да се премести към него. Изображението себе си не трябва да бъде квадрат, защото е писано в областта на определен размер. Всичко, което не се вписва в тази област ще бъдат отрязани. Фиг. 2 показва снимка, за да го добавите към дадена уеб страница.

Кръгла образ, webreference

Фиг. 2. Shark Фото

Сега ние се тази снимка като фон за кръг клас. Задаването елемент размер и конфигуриране на увеличение (Пример 2).

Пример 2. Кръгла елемент

Резултатът от този пример е показан на фиг. 3. фона по подразбиране се намира в горния ляв ъгъл, за да можем да го измести от 70 пиксела наляво, за да акулата е бил в центъра на кръга.

Кръгла образ, webreference

Фиг. 3. Кръгла изображение

Свързани статии

Подкрепете проекта - споделете линка, благодаря!