Круглые изображения | WebReference

Любые растровые изображения сами по себе прямоугольны, поэтому для создания сложной формы в картинках применяют прозрачность или фон, совпадающий с фоном веб-страницы. Действительно круглые изображения можно сделать с помощью стилевого свойства border-radius. К таким изображениям применяется рамка через border и она тоже будет круглой, а не квадратной. Если круглую картинку вставить в <a>, то областью ссылки будет круг.

Чтобы сделать произвольное изображение круглым вначале следует превратить его в квадрат, а затем в стилях добавить свойство border-radius со значением 50% (пример 1). Лучше задавать именно в процентах, так мы не привязываемся к размерам картинок.

Пример 1. Круглые изображения

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Изображения</title> <style> .round { border-radius: 50%; } </style> </head> <body> <img src=»image/meduza1.
jpg» alt=»»> <img src=»image/meduza2.jpg» alt=»»> <img src=»image/meduza3.jpg» alt=»»> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Круглые изображения

border-radius применяется к любым другим элементам, поэтому мы можем создать пустой квадратный <div> и установить для него фоновую картинку, которую допустимо масштабировать и сдвигать. Само изображение не обязательно должно быть квадратным, потому что оно будет вписано в область заданных размеров. Всё, что не поместится в эту область, будет обрезано. На рис. 2 показана фотографии для добавления её на веб-страницу.

Рис. 2. Фотография акулы

Теперь устанавливаем эту фотографию как фон для класса round, задаём размеры элемента и настраиваем масштаб изображения (пример 2).

Пример 2. Круглый элемент

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Изображения</title> <style> . round { width: 300px; height: 300px; /* Ширина и высота */ border-radius: 50%; /* Превращаем в круг */ background: url(/example/image/shark.jpg) no-repeat -70px 0; /* Параметры фона */ background-size: auto 300px; /* Высота фотографии равна высоте элемента */ } </style> </head> <body> <div></div> </body> </html>

Результат данного примера показан на рис. 3. Фон по умолчанию устанавливается в левом верхнем углу, так что сдвигаем его на 70 пикселей влево, чтобы акула оказалась в центре круга.

Рис. 3. Круглое изображение

изображения

фон

См. также

  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-radius
  • border-top-left-radius
  • border-top-right-radius

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11. 03.2020

Редакторы: Влад Мержевич

Рамка вокруг изображений
Ctrl+←

Карты-изображения
Ctrl+→

Цвета HTML Color Цветовой круг

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Дальше ❯

Цветовой круг

Цветовой круг является наглядной организацией цветов вокруг окружности, Отображение связей между основными цветами, дополнительными цветами и третичными цветами.

Три важных колеса цвета

Сколько способов можно переставить радугу?

RGB

Red, Green, Blue

CMY

Cyan, Magenta, Yellow

RYB

Red, Yellow, Blue

Цветное колесо RGB

Цветовой круг RGB (красный, зеленый, синий) представляет собой 3 источника света, используемые для производства цветов на экране телевизора или компьютера.

Основные цвета: красный, зеленый и синий.

Вторичные цвета создаются путем смешивания основных цветов:

Красный и зеленый = желтый
Зеленый и синий = голубой
Синий и красный = пурпурный

12 основных цветов RGB:

RED
#FF0000
(255,0,0)
#FF8000
(255,128,0)		YELLOW
#FFFF00
(255,255,0)
#80FF00
(128,255,0)		GREEN
#00FF00
(0,255,0)
#00FF80
(0,255,80)
CYAN
#00FFFF
(0,255,255)
#0080FF
(0,128,255)		BLUE
#0000FF
(0,0,255)
#8000FF
(128,00,255)		MAGENTA
#FF00FF
(255,0,255)
#FF0080
(255,0,128)

Зеленый цвет RGB отличается от цвета HTML с именем Green.

Зеленый цвет RGB отличается от цвета HTML с именем Green.

Read more about RGB.

CMY (K) цвет колеса

CMY (K) (голубой, пурпурный, желтый) представляют цвета, используемые для печати на бумаге.

Основные цвета: голубой, пурпурный и желтый.

Вторичные цвета создаются путем смешивания основных цветов:

Голубой и пурпурный = синий
Пурпурный и желтый = красный
Желтый и голубой = зеленый.

12 основных цветов CYM:

CYAN
#00FFFF
(0,255,255)
#0080FF
(0,128,255)		BLUE
#0000FF
(0,0,255)
#8000FF
(128,00,255)		MAGENTA
#FF00FF
(255,0,255)
#FF0080
(255,0,128)
RED
#FF0000
(255,0,0)
#FF8000
(255,128,0)		YELLOW
#FFFF00
(255,255,0)
#80FF00
(128,255,0)		GREEN
#00FF00
(0,255,0)
#00FF80
(0,255,80)

Подробнее о CMYK.

Колесо цвета синтез системе RYB

Синтез системе RYB (красный, желтый, синий) цвет колеса используется художников, художников и дизайнеров для смешивания пигмента цветов.

3 основных цвета красный, желтый и синий.

Вторичные цвета создаются путем смешивания основных цветов.

3 вторичных цвета оранжевый, зеленый и фиолетовый.

Красный и желтый = оранжевый
Желтый и синий = зеленый
Синий и красный = фиолетовый.

Третичные цвета изготавливаются путем смешивания двух вторичных цветов.

6 третичных цветов красно-оранжевый, желтый-оранжевый, желтый-зеленый, сине-зеленый, сине-фиолетовый, красно-фиолетовый

12 основных цветов синтез системе RYB:

RED
#FE2712		R-O
#FC600A		ORANGE
#FB9902		Y-O
#FCCC1A		YELLOW
#FEFE33		Y-G
#B2D732
GREEN
#66B032		B-G
#347C98		BLUE
#0247FE		B-P
#4424D6		PURPLE
#8601AF		R-P
#C21460

Синтез системе RYB является лучшим цветовым колесом, чтобы определить цвета, которые хорошо сочетаются друг с другом.

Синтез системе RYB колесо может быть использовано для создания приятных цветовых схем для Интернета.

Вы узнаете больше о цветовых схемах в главе Цветовые схемы.

❮ Назад Дальше ❯

PHP\CSS\JS\HMTL Editor
Как сделать

Вкладки
Выпадающие
Аккордеоны
Конвертер
Анимированные кнопки
Боковая Навигация
Верхняя навигация
Модальные коробки
Строки хода выполнения
Параллакс
Форма входа
HTML вставка
Google Карты
Ползунки диапазона
Подсказки
Слайдшоу
Список фильтров
Сортировать список

Еще »

Copyright 2018-2020 HTML5CSS.ru

Правила и Условия Политика конфиденциальности О нас Контакты

html — нужно нарисовать круг с помощью CSS, как это

2

Новое! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

Нужно нарисовать круг, на который я помещаю иконку изображения, как показано на рисунке ниже, применяя CSS. Пробовал код, но не смог его выполнить. Пожалуйста помоги. Необходимый:

HTML:

 .точка {
  высота: 505 пикселей;
  ширина: 25 пикселей;
  цвет фона: #bbb;
  радиус границы: 50%;
  отображение: встроенный блок;
} 
 <дел>
   
Круглые точки/круги
 
  <промежуток>
  • HTML
  • CSS

1

я создаю как хочешь. пожалуйста, проверьте. если это полезно, нажмите зеленую галочку. спасибо

 .точка {
  высота: 200 пикселей;
  ширина: 200 пикселей;
  цвет фона: #fff;
  радиус границы: 50%;
  граница: 5 пикселей сплошного серого цвета;
  отображение: встроенный блок;
  выравнивание текста: по центру;
}
.точка h4 {
      размер шрифта: 23px;
      маржа: 0;
}
.dot-box {
    дисплей: -webkit-box;
    отображение: -ms-flexbox;
    дисплей: гибкий;
    -webkit-box-pack: по центру;
        -ms-flex-pack: по центру;
            выравнивание содержимого: по центру;
    -webkit-box-align: по центру;
        -ms-flex-align: по центру;
            выравнивание элементов: по центру;
    -webkit-box-orient: вертикальный;
    -webkit-box-direction: нормальный;
        -ms-flex-direction: столбец;
            flex-направление: столбец;
    высота: 100%;
}
.
 
 dot2 {
      дисплей: таблица;
}
.dot-box2 {
      отображение: таблица-ячейка;
    вертикальное выравнивание: посередине;
} 
 

Круг с гибким


<дел>
<дел>

  

  ЧЛЕН ФУНКЦИЯ