(ru) Update translation at "Web/CSS/background-blend-mode" page (#1989)

* Close #1989 

Co-authored-by: Sasha Sushko <sushko@outlook.com>

2 files changed, 115 insertions, 98 deletions

diff --git a/files/ru/web/css/background-blend-mode/index.html b/files/ru/web/css/background-blend-mode/index.html
deleted file mode 100644
index 1bbc67d090..0000000000
--- a/files/ru/web/css/background-blend-mode/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: background-blend-mode
-slug: Web/CSS/background-blend-mode
-translation_of: Web/CSS/background-blend-mode
----
-<p>{{CSSRef()}}</p>
-
-<h2 id="Summary" name="Summary">Описание</h2>
-
-<p>Свойство <code>background-blend-mode</code> описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов.</p>
-
-<p>Режимы наложения должны быть определены в том же порядке что CSS свойство {{cssxref("background-image")}}. Если длины списка режимов наложения и фоновых изображений не равны, он будет повторяться и/или сокращаться до совпадения длин.</p>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">Синтаксис</h2>
-
-<pre class="twopartsyntaxbox"><code>Формальный синтаксис:  {{csssyntax("background-blend-mode")}}</code></pre>
-
-<pre>background-blend-mode: normal;               /* Одно значение */
-background-blend-mode: darken, luminosity;   /* Два значение, по одному на каждый фон */
-
-background-blend-mode: initial;
-background-blend-mode: inherit;
-background-blend-mode: unset;
-</pre>
-
-<h3 id="Values" name="Values">Значения</h3>
-
-<dl>
- <dt><code>&lt;blend-mode&gt;</code></dt>
- <dd>{{cssxref("&lt;blend-mode&gt;")}} обозначающий режим наложения, который применён. Может быть несколько значений, разделённых запятыми.</dd>
-</dl>
-
-<h2 id="Examples" name="Examples">Пример</h2>
-
-&lt;select id="select"&gt;
-    &lt;option&gt;normal&lt;/option&gt;
-    &lt;option&gt;multiply&lt;/option&gt;
-    &lt;option selected&gt;screen&lt;/option&gt;
-    &lt;option&gt;overlay&lt;/option&gt;
-    &lt;option&gt;darken&lt;/option&gt;
-    &lt;option&gt;lighten&lt;/option&gt;
-    &lt;option&gt;color-dodge&lt;/option&gt;
-    &lt;option&gt;color-burn&lt;/option&gt;
-    &lt;option&gt;hard-light&lt;/option&gt;
-    &lt;option&gt;soft-light&lt;/option&gt;
-    &lt;option&gt;difference&lt;/option&gt;
-    &lt;option&gt;exclusion&lt;/option&gt;
-    &lt;option&gt;hue&lt;/option&gt;
-    &lt;option&gt;saturation&lt;/option&gt;
-    &lt;option&gt;color&lt;/option&gt;
-    &lt;option&gt;luminosity&lt;/option&gt;
-&lt;/select&gt;</pre>
-
-<pre class="brush: css" class="hidden">#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: screen;
-}</pre>
-
-<pre class="brush: js" class="hidden">document.getElementById("select").onchange = function(event) {
-    document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
-}
-console.log(document.getElementById('div'));</pre>
-
-<p>{{ EmbedLiveSample('Examples', "330", "330") }}</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('Compositing', '#background-blend-mode', 'background-blend-mode') }}</td>
-   <td>{{ Spec2('Compositing') }}</td>
-   <td>Первоначальная спецификация</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
-
-<p>{{Compat("css.properties.background-blend-mode")}}</p>
-
-<h2 id="See_also" name="See_also">Смотрите также</h2>
-
-<ul>
- <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
- <li>{{cssxref("mix-blend-mode")}}</li>
-</ul>
diff --git a/files/ru/web/css/background-blend-mode/index.md b/files/ru/web/css/background-blend-mode/index.md
new file mode 100644
index 0000000000..63112f57d6
--- /dev/null
+++ b/files/ru/web/css/background-blend-mode/index.md
@@ -0,0 +1,115 @@
+---
+title: background-blend-mode
+slug: Web/CSS/background-blend-mode
+tags:
+  - CSS
+  - CSS-свойство
+  - Композиция и наложение
+  - recipe:css-property
+translation_of: Web/CSS/background-blend-mode
+browser-compat: css.properties.background-blend-mode
+---
+{{CSSRef()}}
+
+[CSS-свойство](/ru/docs/Web/CSS) **`background-blend-mode`** описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов.
+
+{{EmbedInteractiveExample("pages/css/background-blend-mode.html")}}
+
+Режимы наложения должны быть определены в том же порядке, что и CSS-свойство {{cssxref("background-image")}}. Если количество режимов наложения будет больше или меньше количества фоновых изображений, то последние режимы будут либо отброшены, либо повторены до совпадения количества соответственно.
+
+## Cинтаксис
+
+```css
+/* Одно значение */
+background-blend-mode: normal;
+
+/* Два значения, по одному на каждый фон */
+background-blend-mode: darken, luminosity;
+
+/* Глобальные значения */
+background-blend-mode: initial;
+background-blend-mode: inherit;
+background-blend-mode: revert;
+background-blend-mode: unset;
+```
+
+### Значения
+
+- {{cssxref("&lt;blend-mode&gt;")}}
+  - : Применяемый режим наложения. Можно указать несколько значений, разделённых запятыми.
+
+## Формальное определение
+
+{{cssinfo}}
+
+## Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+### Простой пример
+
+```css
+.item {
+    width: 300px;
+    height: 300px;
+    background: url('image1.png'),url('image2.png');
+    background-blend-mode: screen;
+}
+```
+
+### Попробуйте разные режимы смешивания
+
+```html hidden
+<div id="div"></div>
+<select id="select">
+    <option>normal</option>
+    <option>multiply</option>
+    <option selected>screen</option>
+    <option>overlay</option>
+    <option>darken</option>
+    <option>lighten</option>
+    <option>color-dodge</option>
+    <option>color-burn</option>
+    <option>hard-light</option>
+    <option>soft-light</option>
+    <option>difference</option>
+    <option>exclusion</option>
+    <option>hue</option>
+    <option>saturation</option>
+    <option>color</option>
+    <option>luminosity</option>
+</select>
+```
+
+```css hidden
+#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: screen;
+}
+```
+
+```js hidden
+document.getElementById("select").onchange = function(event) {
+    document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
+}
+console.log(document.getElementById('div'));
+```
+
+{{ EmbedLiveSample('Примеры', "330", "350") }}
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{cssxref("&lt;blend-mode&gt;")}}
+- {{cssxref("mix-blend-mode")}}