From f84d123c02b3c381d143106d8d18d3d5a8cf1fdf Mon Sep 17 00:00:00 2001 From: Yury Shapkarin Date: Mon, 30 Aug 2021 09:16:14 +0300 Subject: (ru) Update translation at "Web/CSS/background-blend-mode" page (#1989) * Close #1989 Co-authored-by: Sasha Sushko --- files/ru/web/css/background-blend-mode/index.html | 98 ------------------ files/ru/web/css/background-blend-mode/index.md | 115 ++++++++++++++++++++++ 2 files changed, 115 insertions(+), 98 deletions(-) delete mode 100644 files/ru/web/css/background-blend-mode/index.html create mode 100644 files/ru/web/css/background-blend-mode/index.md (limited to 'files/ru') 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 ---- -

{{CSSRef()}}

- -

Описание

- -

Свойство background-blend-mode описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов.

- -

Режимы наложения должны быть определены в том же порядке что CSS свойство {{cssxref("background-image")}}. Если длины списка режимов наложения и фоновых изображений не равны, он будет повторяться и/или сокращаться до совпадения длин.

- -

{{cssinfo}}

- -

Синтаксис

- -
Формальный синтаксис:  {{csssyntax("background-blend-mode")}}
- -
background-blend-mode: normal;               /* Одно значение */
-background-blend-mode: darken, luminosity;   /* Два значение, по одному на каждый фон */
-
-background-blend-mode: initial;
-background-blend-mode: inherit;
-background-blend-mode: unset;
-
- -

Значения

- -
-
<blend-mode>
-
{{cssxref("<blend-mode>")}} обозначающий режим наложения, который применён. Может быть несколько значений, разделённых запятыми.
-
- -

Пример

- -<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> - -
#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;
-}
- -
document.getElementById("select").onchange = function(event) {
-    document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
-}
-console.log(document.getElementById('div'));
- -

{{ EmbedLiveSample('Examples', "330", "330") }}

- -

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

- - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{ SpecName('Compositing', '#background-blend-mode', 'background-blend-mode') }}{{ Spec2('Compositing') }}Первоначальная спецификация
- -

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

- -

{{Compat("css.properties.background-blend-mode")}}

- -

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

- - 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("<blend-mode>")}} + - : Применяемый режим наложения. Можно указать несколько значений, разделённых запятыми. + +## Формальное определение + +{{cssinfo}} + +## Формальный синтаксис + +{{csssyntax}} + +## Примеры + +### Простой пример + +```css +.item { +    width: 300px; +    height: 300px; +    background: url('image1.png'),url('image2.png'); +    background-blend-mode: screen; +} +``` + +### Попробуйте разные режимы смешивания + +```html hidden +
+ +``` + +```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("<blend-mode>")}} +- {{cssxref("mix-blend-mode")}} -- cgit v1.2.3-54-g00ecf