Описание тега background-blend-mode
Свойство CSS background-blend-mode описывает, как фоновые изображения элемента должны смешиваться друг с другом и с цветом фона элемента.
1
ответ
Как игнорировать прозрачные пиксели в режиме наложения фона
Смотрите это JSFiddle .goblin { background-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png"); width: 600px; height: 500px; background-color: red; background-blend-mode: normal; } .goblin:hover { background-…
01 июн '18 в 15:19
1
ответ
Примените шкалу яркости css -webkit-filter перед использованием background-blend-mode, сохраняя цвет
Я пытаюсь добиться монохромного цветного изображения при наведении мыши, где цвета изображения преобразуются в оттенки серого, а серые оттенки впоследствии заменяются оттенком цвета, с которым я смешиваюсь. Это может выглядеть так Чтобы смоделироват…
04 май '15 в 08:43
1
ответ
Мерцание на элементах, только Chrome, только в режиме background-blend-mode
Мы запускаем веб-сайт www.desirio.com, который использует фоновое изображение на теле с background-blend-mode: luminosity В Chrome, когда вы наводите курсор на элементы, вы видите странные белые линии, которые случайным образом мигают "где-то". Когд…
09 ноя '17 в 16:29
2
ответа
CSS Background-Blend-Mode для двух элементов
Предположим, у меня есть div с градиентом, примененным в качестве фонового свойства. Теперь я хочу наложить черный PNG (меньшего размера) и установить для PNG фоновый режим наложения. К сожалению, я понятия не имею, как этого добиться. Я знаю, что у…
11 ноя '14 в 14:51
1
ответ
Почему не работают режимы наложения CSS при применении к телу документа?
Вот пример режимов наложения CSS, работающих с заданным элементом "background": body { position: relative; } .background { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(red, blue); } .blend { background:…
22 сен '17 в 07:13
2
ответа
Каков порядок применения нескольких режимов наложения?
У меня есть следующий код CSS: div { background: url('image-url'), linear-gradient(gradient), url('image-url-2'); background-blend-mode: blend-mode-1, blend-mode-2; } Положение градиентов или фонов URL может измениться. Я думаю, что это должно повли…
28 фев '16 в 03:56
1
ответ
Режим наложения в Chrome не применяется должным образом
Работал над повторяющимся фоном, который был в центре внимания, и решил использовать режимы наложения, чтобы добиться этого. Однако создается впечатление, что режимы наложения не применяются в Chrome. Тиражируется здесь: http://jsfiddle.net/pptn4f5v…
17 окт '15 в 04:19
1
ответ
Прозрачный фон становится белым при изменении размера изображения
У меня есть HTML-страница, где мне нужно визуализировать 3 изображения, одно поверх друг друга. <div id="preview"> <img src="transparent-image"> </div> со следующим CSS #preview{ background-image:url(layer0-image), url(layer1-image…
13 мар '17 в 15:21
3
ответа
CSS режим смешивания для заголовка карусели Bootstrap
Я использую карусельный компонент из начальной загрузки, а также хочу использовать CSS blend-mode background-blend-mode: multiply; для подписи. К сожалению, режим наложения не работает. Код следующий: <div class="carousel-inner" role="listbox">…
09 апр '15 в 20:09
0
ответов
Режим CSS Background Blend не применяется
У меня есть два div, один полноэкранный фоновое изображение, другой полоса с разметкой, как это. <div class="home"> <div class="home-bar"> </div> </div> Я пытаюсь сделать home.bar класс имеет эффект смешения screen и я пытаюс…
03 мар '15 в 00:57
0
ответов
Фоновое изображение, градиент и изображение с непрозрачностью?
У меня есть blendmode для работы с фоновым изображением, но я бы хотел иметь более прозрачное изображение. Есть ли способ (кроме осветления самого изображения BG, которое приведет к другому "смешиванию") придать непрозрачность изображению? Я добавил…
13 июн '17 в 19:59
4
ответа
CSS-фильтр серого и background-blend-mode одновременно?
Я пытаюсь обработать изображение таким же образом, как и в файле фотошопа - обесцветить изображение до градаций серого, а затем применить наложение цвета в режиме многократного наложения. Для этого я создаю фоновое изображение CSS с помощью... .some…
14 сен '14 в 18:31
1
ответ
mix-blend-mode: multiply - черный баг Firefox
Я строю диаграмму ven из CSS и html. В Firefox почему-то режим mix-blend-режима отображается полностью черным? .ven-element { width: 63%; padding-top: 63%; border-radius: 50%; text-transform: uppercase; font-weight: bold; mix-blend-mode: multiply; c…
15 сен '15 в 12:46
0
ответов
Есть ли способ получить результаты Adobe Photoshop Blend в режимах Pin Light, Divide, Subtract, Vivid Light в CSS?
В Adobe Photoshop есть почти 30 смешанных режимов, а в CSS - только 15-18. Есть ли способ получить результаты оставшихся режимов наложения в CSS, например, Pin Light, Divide, Subtract, Vivid Light и т. Д.? Здесь я использую Sass для генерации режимо…
14 ноя '18 в 05:52
1
ответ
Печатание только слова "тело" ведет себя странно в рабочем HTML-режиме background-blend-mode
Я создавал сайт, используя только HTML и CSS, и я хотел нанести черный полупрозрачный оттенок на Jumbotron [я использую BootStrap]. .jumbotron { height: 40rem; text-align: center; z-index: 2; background-size: cover; background-attachment:fixed; back…
13 июн '17 в 11:03
1
ответ
Линейный градиент не работает в Edge и IE11
Мой CSS не показывает фоновое изображение в Microsoft Edge и IE11. Похоже, что-то связано с линейными градиентами в этих браузерах. Появляется цвет фона, но не изображение в Edge и IE11. Какие-либо предложения? #DIV_1 { background-blend-mode: overla…
24 авг '17 в 19:27
0
ответов
Ошибка положения фона и режима наложения в Firefox
У меня есть заголовок с фоновым изображением, цвет и режим смешивания: умножение. При прокрутке я изменяю положение фона по вертикали, чтобы создать эффект параллакса. В Firefox он загружается нормально, но при прокрутке фоновое изображение располож…
11 май '16 в 07:44
3
ответа
Режим смешивания смешивается с помощью 3D-преобразований на странице.
Я возился с mix-blend-mode имущество. Все отлично работает, пока не добавлю что-то вроде transform: perspective(100px) или любое другое 3d преобразование в любом месте на странице, затем оно полностью ломается. Преобразование применяется, но режим с…
04 окт '15 в 11:30
1
ответ
background-blend-mode с градиентом и изображением
В настоящее время я не могу смешать PNG-изображение с CSS-градиентом. Код выглядит так: background: linear-gradient(to right, red , blue), url(img/water.png); background-blend-mode: overlay; Режим наложения не применяется при использовании градиента…
11 ноя '14 в 13:17
3
ответа
Можно ли применить режим смешивания CSS для элемента в другом div?
Можно ли применить режим смешивания CSS для элемента в другом div? Например, у меня есть большое фоновое изображение героя в одном div. Над этим изображением (в другом div) у меня есть синяя полупрозрачная коробка с текстом в нем. Этот прозрачный бл…
18 окт '16 в 04:24