diff options
Diffstat (limited to 'files/ru/web/css/background-position')
| -rw-r--r-- | files/ru/web/css/background-position/index.html | 178 |
1 files changed, 178 insertions, 0 deletions
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 +--- +<div>{{CSSRef}}</div> + +<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>background-position</code></strong> устанавливает начальную позицию для каждого фонового изображения. Положение относительно уровня положения, установленного {{cssxref("background-origin")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/background-position.html")}}</div> + +<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на извлечение.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="brush: css no-line-numbers">/* Ключевые значения */ +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; +</pre> + +<p>Свойство <code>background-position</code> указывается в виде одного или нескольких значений <code><a href="#<position>"><position></a></code>, разделенных запятыми.</p> + +<h3 id="Values" name="Values">Значения</h3> + +<dl> + <dt><a id="<position>" name="<position>"><code><position></code></a></dt> + <dd>{{cssxref("<position>")}}. Позиция определяет координату x/y, чтобы разместить элемент относительно границ поля элемента. Она может быть определена с использованием одного и двух значений. Если используются два значения, первое значение предоставляет горизонтальную позицию, а второе представляет вертикальную позицию. Если указано только одно, второе значение считается <code>center</code>.</dd> + <dd> + <p><strong>Синтаксис 1-значения:</strong> значение может быть:</p> + + <ul> + <li>Значение ключевого слова <code>center</code>, которое центрирует изображение.</li> + <li>Одно из значений ключевых слов <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. Оно указывает край напротив, которого нужно поместить элемент. Затем для другого измерения устанавливается значение 50%, таким образом элемент размещается в середине указанного края.</li> + <li>{{cssxref("<length>")}} или {{cssxref("<percentage>")}}. Оно указывает координату X относительно левого края, с координатой Y установленной на 50%.</li> + </ul> + + <p><strong>Синтаксис с 2-значениями:</strong> одно из значений определяет X, а другое определяет Y. Каждое значение может быть:</p> + + <ul> + <li>Одно из значений ключевых слов <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. Если здесь указаны <code>left</code> или <code>right</code>, то оно определяет X, а другое заданное значение определяет Y. Если даны <code>top</code> или <code>bottom</code>, то оно определяет Y, а другое значение определяет X.</li> + <li>{{cssxref("<length>")}} или {{cssxref("<percentage>")}}. Если другое значение является <code>left</code> или <code>right</code>, то оно определяет Y, относительно верхнего края. Если другое значение <code>top</code> или <code>bottom</code>, то оно определяет X, относительно левого края. Если оба значения <code><length></code> или <code><percentage></code>, то первое определяет X, а второе Y.</li> + </ul> + + <p>Обратите внимание,что:</p> + + <ul> + <li>Если одно значение <code>top</code> или <code>bottom</code>, то другое значение не может быть <code>top</code> или <code>bottom</code>.</li> + <li>Если одно значение является <code>left</code> или <code>right</code>, то другое значение не может быть <code>left</code> или <code>right</code>.</li> + </ul> + + <p>Это означает, например, что <code>top top</code> и <code>left right</code> являются недействительные.</p> + </dd> +</dl> + +<h3 id="Официальный_синтаксис">Официальный синтаксис</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<p>Каждый из этих примеров использует свойство {{cssxref("background")}} для создания желтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="exampleone">Example One</div> +<div class="exampletwo">Example Two</div> +<div class="examplethree">Example Three</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; +}</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample('Examples', 420, 200)}}</p> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#background-position', 'background-position')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Добавлена поддержка нескольких фонов и синтаксиса с четырьмя значениями. Изменяет определение процента, чтобы соответствовать реализациям.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Позволяет смешивать значения ключевых слов и {{cssxref("<length>")}} и {{cssxref("<percentage>")}}.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#background-position', 'background-position')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Первоначальное определение.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузеров</h2> + +<p class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</p> + +<p>{{Compat("css.properties.background-position")}}</p> + +<h3 id="Quantum_CSS_заметки">Quantum CSS заметки</h3> + +<ul> + <li>В Gecko есть ошибка, означающая, что <code>background-position</code> не может быть {{cssxref("transition","transitioned")}} между двумя значениями, содержащими разные числа значений {{cssxref("<position>")}}, для примера <code>background-position: 10px 10px;</code> and <code>background-position: 20px 20px, 30px 30px;</code> (смотрите {{bug(1390446)}}). Новый параллельный CSS движок Firefox (также известный как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, который планируется выпустить в Firefox 57) исправляет это.</li> +</ul> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li>{{cssxref("background-position-x")}}</li> + <li>{{cssxref("background-position-y")}}</li> + <li>{{cssxref("background-position-inline")}}</li> + <li>{{cssxref("background-position-block")}}</li> + <li><a href="/en-US/docs/Web/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Использование нескольких значений</a></li> + <li>{{cssxref("transform-origin")}}</li> +</ul> |