From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/background-position/index.html | 178 ++++++++++++++++++++++++ 1 file changed, 178 insertions(+) create mode 100644 files/ru/web/css/background-position/index.html (limited to 'files/ru/web/css/background-position/index.html') diff --git a/files/ru/web/css/background-position/index.html b/files/ru/web/css/background-position/index.html new file mode 100644 index 0000000000..1d3d5ab02a --- /dev/null +++ b/files/ru/web/css/background-position/index.html @@ -0,0 +1,178 @@ +--- +title: background-position +slug: Web/CSS/background-position +translation_of: Web/CSS/background-position +--- +
{{CSSRef}}
+ +

CSS свойство background-position устанавливает начальную позицию для каждого фонового изображения. Положение относительно уровня положения, установленного {{cssxref("background-origin")}}.

+ +
{{EmbedInteractiveExample("pages/css/background-position.html")}}
+ + + +

Синтаксис

+ +
/* Ключевые значения */
+background-position: top;
+background-position: bottom;
+background-position: left;
+background-position: right;
+background-position: center;
+
+/* <процент> значения */
+background-position: 25% 75%;
+
+/* <отрезок> значения */
+background-position: 0 0;
+background-position: 1cm 2cm;
+background-position: 10ch 8em;
+
+/* Несколько изображений */
+background-position: 0 0, center;
+
+/* Значения смещения края */
+background-position: bottom 10px right 20px;
+background-position: right 3em bottom 10px;
+background-position: bottom 10px right;
+background-position: top right 10px;
+
+/* Глобальные значения */
+background-position: inherit;
+background-position: initial;
+background-position: unset;
+
+ +

Свойство background-position указывается в виде одного или нескольких значений <position>, разделенных запятыми.

+ +

Значения

+ +
+
<position>
+
{{cssxref("<position>")}}. Позиция определяет координату x/y, чтобы разместить элемент относительно границ поля элемента. Она может быть определена с использованием одного и двух значений. Если используются два значения, первое значение предоставляет горизонтальную позицию, а второе представляет вертикальную позицию. Если указано только одно, второе значение считается center.
+
+

Синтаксис 1-значения: значение может быть:

+ +
    +
  • Значение ключевого слова center, которое центрирует изображение.
    • +
  • Одно из значений ключевых слов top, left, bottom, right. Оно указывает край напротив, которого нужно поместить элемент. Затем для другого измерения устанавливается значение 50%, таким образом элемент размещается в середине указанного края.
    • +
  • {{cssxref("<length>")}} или {{cssxref("<percentage>")}}. Оно указывает координату X относительно левого края, с координатой Y установленной на 50%.
    • +
+ +

Синтаксис с 2-значениями: одно из значений определяет X, а другое определяет Y. Каждое значение может быть:

+ +
    +
  • Одно из значений ключевых слов top, left, bottom, right. Если здесь указаны left или right, то оно определяет  X, а другое заданное значение определяет Y. Если даны top или bottom, то оно определяет Y, а другое значение определяет X.
    • +
  • {{cssxref("<length>")}} или {{cssxref("<percentage>")}}. Если другое значение является left или right, то оно определяет Y, относительно верхнего края. Если другое значение top или bottom, то оно определяет X, относительно левого края. Если оба значения <length> или <percentage>, то первое определяет X, а второе Y.
    • +
+ +

Обратите внимание,что:

+ +
    +
  • Если одно значение top или bottom, то другое значение не может быть top или bottom.
    • +
  • Если одно значение  является left или right, то другое значение не может быть left или right.
    • +
+ +

Это означает, например, что top top и left right являются недействительные.

+
+
+ +

Официальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Каждый из этих примеров использует свойство {{cssxref("background")}} для создания желтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.

+ +

HTML

+ +
<div class="exampleone">Example One</div>
+<div class="exampletwo">Example Two</div>
+<div class="examplethree">Example Three</div>
+ +

CSS

+ +
/* Общий среди всех <div>-ов */
+div {
+  background-color: #FFEE99;
+  background-repeat: no-repeat;
+  width: 300px;
+  height: 80px;
+  margin-bottom: 12px;
+}
+
+/* В этих примерах используется сокращенное свойство 'background' */
+.exampleone {
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
+}
+.exampletwo {
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat;
+}
+
+/* Несколько фоновых изображений: каждое изображение сопоставляется
+   с соответствующей позицией, от первого указанного до последнего. */
+.examplethree {
+  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
+                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-position: 0px 0px,
+                       center;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Examples', 420, 200)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Backgrounds', '#background-position', 'background-position')}}{{Spec2('CSS3 Backgrounds')}}Добавлена поддержка нескольких фонов и синтаксиса с четырьмя значениями. Изменяет определение процента, чтобы соответствовать реализациям.
{{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}}{{Spec2('CSS2.1')}}Позволяет смешивать значения ключевых слов и {{cssxref("<length>")}} и {{cssxref("<percentage>")}}.
{{SpecName('CSS1', '#background-position', 'background-position')}}{{Spec2('CSS1')}}Первоначальное определение.
+ +

{{cssinfo}}

+ +

Совместимость браузеров

+ + + +

{{Compat("css.properties.background-position")}}

+ +

Quantum CSS заметки

+ + + +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf