CSS свойство background — Как создать сайт
CSS справочник
CSS свойство background позволяет установить необходимые свойства фона в одном объявлении (универсальное свойство). Значения могут быть указаны в любом порядке (и в любом необходимом количестве), браузер автоматически определит, какое из них соответствует необходимому свойству.
Значения следующих свойств могут быть установлены:
- background-color (color | transparent| initial | inherit).
- background-image (url | none | initial | inherit).
- background-position (значение).
- background-size (auto | length | cover | contain | initial | inherit).
- background-repeat (repeat | repeat-x |repeat-y | no-repeat | initial | inherit).
- background-origin (padding-box | border-box | content-box | initial | inherit).
- background-clip (border-box | padding-box | content-box | initial | inherit).
- background-attachment (scroll | fixed | local | initial | inherit).
Если Вы используете для фона элемента значения position и size вместе, то вы должны при этом разделять их слэшем «/» (position/size).
Поддержка браузерами
| Свойство | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| background | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
CSS синтаксис:
background:"color image position/size repeat origin clip attachment initial | inherit";
JavaScript синтаксис:
object.style.background="blue no-repeat"
Значения свойства
| Значение | Описание |
|---|---|
| background-color | Определяет цвет фона (HEX, RGB, RGBA, HSL, HSLA). |
| background-image | Задает одно или несколько фоновых изображений для элемента. |
| background-position | Задает положение (позицию) фонового изображения. |
| background-size | Определяет размер фонового изображения/-ий. |
| background-repeat | Устанавливает, как фоновое изображение будет повторяться. |
| background-origin | Определяет область позиционирования фонового изображения/-ий. |
| background-clip | Определяет область рисования фона. |
| background-attachment | Устанавливает, поведение фонового изображения во время прокрутки (фиксированное или прокручивается с остальной частью страницы). |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS1 (в CSS3 добавлены свойства background-size, background-origin и background-clip).
Наследуется
Нет.
Анимируемое
Да.
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования универсального свойства background</title> <style>.
primer {
background:#00FF00 url('/images/smile.png') repeat-x center; /* свойства фона для элемента */
height:150px; /* высота элемента */
}
</style>
</head>
<body>
<div class = "primer"></div>
</body>
</html>
В этом примере с использованиме CSS свойства height мы задали для блочного элемента <div> высоту 150 пикселей и с использованием универсального CSS свойства background указали следующие значения для его фона:
- зеленый цвет заднего фона в шестнадцатерично системе указания цвета — #00FF00 (background-color).
- путь к изображению, которое используется в качестве заднего фона (smile.png) (background-image).
- указали, что наше изображение повторяется только по оси X (background-repeat).
- указали, что наше изображение позиционируется по центру (background-position).
Результат нашего примера:
CSS справочник
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Поделиться
Твитнуть
Поделиться
CSS: выравнивание по центру
CSS: выравнивание по центруЯзыки
Это перевод. Здесь могут содержаться ошибки или страница может быть устаревшей по отношению к Английской версии. Переводчик: Евгений (neighbor report)
Смотрите также указатель всех приёмов работы.
Центрирование
Общая функция CSS — центрирование текста или изображения. Фактически, существует три вида центрирования:
- Центрирование строк текста
- Центрирование текстового блока или изображения
- Центрирование текстового блока или изображения по вертикали
В последних реализациях CSS вы можете также использовать возможности Уровня 3 (CSS3), позволяющие выровнять по центру абсолютно позиционированные элементы:
- Выравнивание по вертикали в уровне 3
- Выравнивание по вертикали и горизонтали в уровне 3
- Выравнивание в области просмотра в уровне 3
Центрирование строк текста
Самый распространённый и (потому) самый лёгкий тип центрирования
— это центрирование строк текста в абзаце или заголовке.
Для этого
CSS обладает свойством ‘text-align’:
P { text-align: center }
h3 { text-align: center }которое отображает каждую строку в абзаце P или заголовке h3 по центру между полями, вот так:
Все строки в этом абзаце выровнены по центру полями абзаца. Это стало возможным благодаря значению ‘center’ свойства CSS ‘text-align’.
Центрирование блока или изображения
Иногда центрировать нужно не текст, а блок в целом. Или, по-другому говоря: мы хотим, чтобы правое и левое поля были одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно используется для блоков с фиксированной шириной, потому что если блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот пример:
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 6em
}
...
<P>Этот довольно ...Этот довольно узкий блок текста центрирован.
Заметьте, что строки внутри блока не центрированы (они выровнены
влево), в отличие от предыдущего примера.
Этот метод также можно использовать для центрирования изображения: поместите его в собственный блок и примените свойства полей. Например:
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
...
<IMG src="..." alt="...">Следующее изображение центрировано:
Вертикальное центрирование
CSS уровня 2 не обладает свойством вертикального центрирования. Вероятно, оно появится в версии CSS уровня 3 (см. ниже). Но даже в CSS2 вы можете центрировать блоки вертикально при помощи комбинирования нескольких свойств. Хитрость заключается в том, чтобы указать, что внешний блок должен быть отформатирован как ячейка таблицы, т.к. содержимое ячейки таблицы может быть выровнено по центру вертикально.
Пример, приведенный ниже, демонстрирует центрирование абзаца
внутри блока, который имеет определенную заданную высоту. Отдельный пример показывает абзац,
который центрирован вертикально в окне браузера, потому что
находится внутри блока, позиционированного абсолютно и по высоте
окна.
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
<DIV>
<P>Этот маленький абзац...
</DIV>Этот маленький абзац центрирован вертикально.
Центрирование по вертикали в CSS уровня 3
Уровень 3 CSS предлагает и другие возможности. На момент написания этой статьи (2014 год), хороший способ вертикального выравнивания блока без использования абсолютного позиционирования (что может приводить к частичному перекрытию текста) всё ещё обсуждается. Но если вам известно, что частичное перекрытие текста не станет проблемой в вашем документе, вы можете использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент. Например:
Этот абзац выровнен вертикально по центру.
Для документа, который выглядит вот так:
<div class=container3> <p>Этот абзац… </div>
таблица стилей выглядит так:
div.
container3 {
height: 10em;
position: relative } /* 1 */
div.container3 p {
margin: 0;
position: absolute; /* 2 */
top: 50%; /* 3 */
transform: translate(0, -50%) } /* 4 */Основные правила:
- Сделайте контейнер относительно позиционированным (position: relative), что превратит его в контейнер для абсолютно позиционированных элементов.
- Сам элемент сделайте абсолютно позиционированным (position: absolute).
- Поместите элемент посередине контейнера с помощью ‘top: 50%’. (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)
- Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.)
Недавно (начиная приблизительно с 2015-го года) в нескольких
реализациях CSS стала доступна новая техника.
Она основана на новом
ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово
предназначено для использования в графическом интерфейсе
пользователя (GUI), но ничто не мешает вам использовать его в
документе, если у этого документа правильная структура.
Этот абзац выровнен по центру вертикально.
таблица стилей выглядит следующим образом:
div.container5 {
height: 10em;
display: flex;
align-items: center }
div.container5 p {
margin: 0 }Вертикальное и горизонтальное центрирование в CSS уровня 3
Мы можем расширить оба метода, чтобы центрировать по горизонтали и по вертикали одновременно.
Побочный эффект абсолютного позиционирования абзаца состоит в
том, что абзац становится ровно таким широким, каким он должен быть
(если только мы явно не укажем ширину). В примере ниже мы именно
этого и хотим: мы размещаем по центру абзац из одного слова
(“Центр!“), так что ширина абзаца должна быть равна ширине этого
слова.
Центр!
Жёлтый фон наглядно демонстрирует, что абзац действительно той же ширины, что и его содержимое. Мы подразумеваем, что разметка осталась прежней:
<div class=container4> <p>Центр! </div>
В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:
div.container4 {
height: 10em;
position: relative }
div.container4 p {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.
Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:
Центр!
с этой таблицей стилей:
div.
container6 {
height: 10em;
display: flex;
align-items: center;
justify-content: center }
div.container6 p {
margin: 0 }т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.
Центрирование в области просмотра в CSS уровня 3
Контейнером по умолчанию для абсолютно позиционированных
элементов является область просмотра. (В случае c браузером это
окно браузера). Таким образом, центрирование элемента в области
просмотра не вызывает сложности. Далее приведен полный пример.
(В
этом примере использован синтаксис HTML5.)
<html>
<style>
body {
background: white }
section {
background: black;
color: white;
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
</style>
<section>
<h2>Красиво выровнен по центру</h2>
<p>Этот текстовый блок выровнен вертикально по центру.
<p>И горизонтально, если окно достаточно широкое.
</section>Вы можете увидеть результат в отдельном документе.
Правило ‘margin-right: -50%’ необходимо для компенсации ‘left:
50%’. Правило ‘left’ уменьшает доступную для элемента ширину на
50%. Поэтому визуализатор постарается сделать линии длиною не более
половины ширины контейнера. Указав на то, что правое поле элемента
находится правее на ту же самую величину, отметим, что максимальная
длина линии снова равняется ширине контейнера.
Попробуйте изменить размер окна: вы увидите, что каждое предложение находится на одной строке, когда окно достаточно широкое. Только тогда, когда окно слишком узкое для всего предложения, это предложение будет разбито на несколько строк. Когда вы удалите правило ‘margin-right: -50%’ и снова измените размер окна, вы заметите, что предложения будут уже разбиты, хотя окно все еще шире строк текста в два раза.
(Использование свойства ‘translate’ для центрирования в области просмотра было впервые предложено “Charlie” в ответе на сайте Stack Overflow.)
Bert Bos, style activity leadCopyright © 1994–2021 W3C® Privacy policy
Created 5 May 2001;
Last updated Ср 06 янв 2021 05:40:49
Языки
- Azərbaycan
- Български
- Deutsch
- Ελληνικά
- English
- Español
- Français
- Bahasa Indonesia
- 日本語
- Norsk
- Nederlands
- Polski
- Português
- Português brasileiro
- Русский
- ไทย
- Tagalog
- Українська
- Tiếng Việt
- 简体中文
- 繁體中文
О переводах
Свойство CSS: фон: Несколько фонов
Могу ли я использовать Поиск ?Свойство CSS: фон: Несколько фонов
global»>Глобальное использование
96,38% + 0% «=» 96,38%IE
- 6–8: не поддерживается
- 9–10: поддерживается
- 11: поддерживается
Edge
- 12–113: Поддерживается
- 114: Поддерживается
Firefox
- 2–3.5: Не поддерживается
- 3.6–112 : Поддерживается
- 113: Поддерживается
- 114 — 115: Поддерживается
Chrome
- 4–113: поддерживается
- 114: поддерживается
02% — Supported»> 115–117: поддерживаетсяSafari
- 3.1–16.4: поддерживается
- 16.5: Поддерживается
- 16.6 — TP: Поддерживается
Opera
- 10: не поддерживается
- 11.5–98: поддерживается
- 99: поддерживается
Safari на iOS
- 9007 9 3.2–16.4: Поддерживается
- 16.5: Поддерживается
- 16.6–17: Поддерживается
Opera Mini
- все: Поддержка неизвестна
Браузер Android
- 2.1–4.4.4: Поддерживается
00% — Supported»> 114: ПоддерживаетсяOpera Mobile
- 12–12.1: не поддерживается
- 73: поддерживается
Chrome для Android
- 114: поддерживается
Firefox для Android
- 113: поддерживается
UC Browser для Android
- 13.4: поддержка неизвестна
Samsung Internet
- 4–20: Поддерживается
- 21: Поддерживается
Браузер QQ
- 13.1: Поддержка неизвестна
Браузер Baidu
- 9014 3 13.18: поддержка неизвестна
KaiOS Browser
- 3: Поддержка неизвестна
10% — Support unknown»> 2.5: Поддержка неизвестнаКнопки дизайна и стиля с пользовательскими свойствами CSS
Версия: v7 shadowКнопка s обеспечивают интерактивный элемент, который можно использовать в формах, или везде, где требуется простая стандартная функциональность кнопок. Они могут отображать текст, значки или и то, и другое. Кнопки можно стилизовать с помощью нескольких атрибутов, чтобы они выглядели определенным образом.
Это свойство позволяет указать ширину кнопки. По умолчанию кнопки имеют display: inline-block , но установка этого свойства изменит кнопку на элемент полной ширины с display: block .
Это свойство позволяет указать форму кнопки. По умолчанию кнопки имеют прямоугольную форму с небольшим радиусом границы, но установка этого параметра на «круглая» изменит кнопку на закругленный элемент.
Это свойство определяет цвет фона и границы кнопки.
По умолчанию кнопки имеют сплошной фон, если кнопка не находится внутри панели инструментов, и в этом случае она имеет прозрачный фон.
Это свойство определяет размер кнопки. Установка этого свойства изменит высоту и отступ кнопки.
Цвета
Пользовательские свойства CSS
buttonType
| Описание | Тип кнопки. |
| Атрибут | кнопочный |
| Тип | струнный |
| По умолчанию | 'кнопка' |
цвет
| Описание 9018 6 | Используемый цвет из цветовой палитры вашего приложения. Параметры по умолчанию: "первичный" , "вторичный" , "третичный" , "успешно" , "предупреждение" , "опасность" , " легкий" , "средний" и "темный" . Дополнительные сведения о цветах см. в теме. |
| Атрибут | цвет |
| Тип | "опасность" ｜ «темный» ｜ «светлый» ｜ «средний» ｜ «основной» ｜ «вторичный» ｜ «успешный» ｜ "tretiary" ｜ "warning" ｜ string & Record<никогда, никогда> ｜ undefined |
| По умолчанию | undefined |
| Описание | Если true , пользователь не может взаимодействовать с кнопкой. |
| Атрибут | отключен |
| Тип | логический |
| По умолчанию | Ложь |
загрузить
| Описание | Этот атрибут указывает браузерам загружать URL-адрес вместо перехода к нему, поэтому пользователю будет предложено сохранить его как локальный файл. Если у атрибута есть значение, оно используется в качестве предварительно заполненного имени файла в приглашении Сохранить (пользователь может изменить имя файла, если захочет). |
| Атрибут | загрузить |
| Тип | строка ｜ undefined |
| По умолчанию | undefined |
расширить
| Описание | Установите значение "block" для кнопки полной ширины или "full" для кнопки полной ширины с прямыми углами и без левой или правой границы. |
| Атрибут | расширение |
| Тип | "блок" ｜ "полный" ｜ не определено |
| По умолчанию | не определено |
заполнение
| Описание | Установите «очистить» для прозрачной кнопки, похожей на плоскую кнопку, «контур» для прозрачной кнопки с рамкой или "solid" для кнопки с заполненным фоном. Заливка по умолчанию — «сплошной» , кроме как внутри панели инструментов, где по умолчанию — «прозрачный» . |
| Атрибут | заполнить |
| Тип | "очистить " ｜ "по умолчанию" ｜ "контур" ｜ "сплошной" ｜ не определено |
| По умолчанию | undefined |
форма
| Описание | Элемент формы HTML или идентификатор элемента формы. Используется для отправки формы, когда кнопка не является дочерним элементом формы. |
| Атрибут | форма |
| Тип | HTMLForm Элемент ｜ string ｜ undefined |
| По умолчанию | undefined |
href
| Описание | Содержит URL-адрес или фрагмент URL-адреса, на который указывает гиперссылка. Если это свойство установлено, тег привязки будет отображаться. |
| Атрибут | href |
| Тип | строка ｜ не определено |
| По умолчанию | не определено |
режим
| Описание | Режим определяет, какие стили платформы использовать. |
| Атрибут | режим |
| Тип | "ios " ｜ "md" |
| По умолчанию | не определено |
отн
| Описание | Задает отношение целевого объекта к объекту ссылки. Значение представляет собой список типов ссылок, разделенных пробелами. |
| Атрибут | отн. |
| Тип | строка ｜ undefined |
| По умолчанию | undefined |
routerAnimation
| Описание | При использовании роутера указывает анимацию перехода при переходе на другую страницу с помощью href . |
| Атрибут | не определено |
| Тип | ((основание El: any, opts?: any) => Animation) ｜ undefined |
| По умолчанию | undefined |
routerDirection
| Описание | При использовании маршрутизатора указывает направление перехода при переходе на другую страницу с помощью ссылка . |
| Атрибут | Маршрутизатор-направление |
| Тип | «назад» ｜ «вперед» ｜ «корень» |
| По умолчанию | «вперед» |
shape
| Описание | Установите значение "round" для кнопки с более закругленными углами. |
| Атрибут | Форма |
| Тип | "круглый" ｜ не определено |
| По умолчанию | не определено |
размер 84 Описание
«маленький» для кнопки с меньшей высотой и отступом, значение «по умолчанию» для кнопки с высотой и отступом по умолчанию или значение 9.0161 «большой» для кнопки с большей высотой и отступом. По умолчанию размер не установлен, если только кнопка не находится внутри элемента, где размер по умолчанию равен 90 161 «маленький» 90 162. Установите размер "по умолчанию" внутри элемента, чтобы сделать его кнопкой стандартного размера. Размер "по умолчанию" ｜ «большой» ｜ «маленький» ｜ не определено не определено сильное
| Описание | 9 0183 Если|
| Атрибут | сильный |
| Тип | логический |
| По умолчанию | Ложь |
цель
| Описание | Указывает, где отображать связанный URL-адрес. Применяется только при наличии href . Специальные ключевые слова: "_blank" , "_self" , "_parent" , "_top" . |
| Атрибут | цель |
| Тип | строка ｜ не определено |
| По умолчанию | не определено |
тип
| Описание 9 0185 | Тип кнопки. Кнопка » ｜ «сброс» ｜ «отправить» |
| По умолчанию | 'кнопка' |
| Название | Описание |
|---|---|
ionBlur | Испускается, когда кнопка теряет фокус. |
ionFocus | Испускается, когда кнопка имеет фокус. |
Для этого компонента нет общедоступных методов.
| Имя | Описание |
|---|---|
родной | Собственная кнопка HTML или элемент привязки, который охватывает все дочерние элементы. |
| Имя | Описание |
|---|---|
--фон | 901 83 Фон кнопки|
--background-activated | Фон кнопки при нажатии. Примечание: установка этого параметра будет мешать пульсации Material Design. |
--background-activated-opacity | Непрозрачность кнопки при нажатии |
--background-focused | Фон кнопки при фокусировке клавишей Tab клавишей табуляции |
--background-hover | Фон кнопки при наведении |
--background-hover-opacity | Непрозрачность фона при наведении |
--border-color | Цвет границы кнопки |
--border-radius | Радиус границы кнопки |
--border-style | Стиль границы button |
--border-width | Ширина границы кнопки |
--box-shadow | Тень окна кнопки 901 86 |
--цвет | Цвет текста кнопки |
--color-activated | Цвет текста кнопки при нажатии |
--color-focused 9018 6 | Цвет текста кнопки при фокусировке с вкладкой key |
--color-hover | Цвет текста кнопки при наведении |
--opacity | Непрозрачность кнопки 90 186 |
--нижняя прокладка | Нижний отступ кнопки |
--padding-end | Правый отступ, если направление слева направо, и левый отступ, если направление кнопки справа налево | --padding-start | Отступ слева, если направление слева направо, и отступ справа, если направление кнопки справа налево |
--padding-top | кнопка |
--ripple-color | Цвет эффекта пульсации кнопки |
--transition | Переход кнопки |
| Наименование | Описание |
|---|---|
| « | Содержимое помещается между именованными слотами, если оно предоставлено без слота. Оставить комментарий
|