Удалить mix-blend-mode из дочернего элемента

Как установить смешанный режим смешивания на элемент, но не его дети? Установка детей к значению по умолчанию normal не похоже на работу:Удалить mix-blend-mode из дочернего элемента

http://jsfiddle.net/uoq916Ln/1/

источник

2015-07-25 meetalexjohnson

Это та же проблема, как с непрозрачностью. На самом деле это не так, что свойство наследуется, это то, что весь блок визуализируется с помощью этого эффекта. – vals

кто-то заметил, что весь блок визуализируется с эффектом, и поэтому у вас возникли проблемы. Я могу выполнить то, что вы пытаетесь сделать, удалив h1 из блока, абсолютной позиции и z-индекса 1. Вот jsfiddle, чтобы показать эффект.

HTML

<div class="bkdg"> 
    <h1>Header</h1> 
    <div class="blend"> 
    </div> 
</div>

CSS

.blend { 
    background-color: green; 
    mix-blend-mode: multiply; 
    width: 700px; 
    height: 35px; 
} 
h1 { 
    color: white; 
    position: absolute; 
    top: -15px; left: 10px; 
    z-index: 1; 
}

https://jsfiddle.net/jckot1pu/

источник

2015-07-26 16:13:21 Jpsh

Это обходной путь и хороший, но является ли это решением? – meetalexjohnson

Ну, это сложный вопрос. Хотя он выполняет то, что вы хотите, вы можете не рассматривать это решение, и я могу это понять. Однако, по моему опыту, я иногда встречался, чтобы выполнить стиль css, который вы хотите, иногда вам приходится делать все вокруг. – Jpsh

решение, как избежать mix-blend-mode эффектов детей:

Сделать дочерний элемент REL позиции ative, придайте ему ширину и высоту;
Создайте реальный или псевдоэлемент внутри ребенка с абсолютным положением и примените к нему mix-blend-mode;
inner элемент внутри ребенка для вашего контента. Сделайте его положение абсолютным и поставьте поверх других элементов;

Live example

HTML

<div class="bkdg"> 
    <div class="blend"> 
     <div class="inner"> 
      <h1>Header</h1> 
     </div> 
    </div> 
</div>

CSS

.blend { 
    position: relative; // Make position relative 
    width: 100%; 
    height: 100%; 
} 

.blend::before { // Apply blend mode to this pseudo element 
    content: ''; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 1; 
    background-color: green; 
    mix-blend-mode: multiply; 
} 

.inner { // This is our content, must have absolute position 
    position: absolute; 
    z-index: 2; 
} 

h1 { 
    color: white; 
}

источник

2016-11-04 13:03:32

Я знаю, что это было задано более двух лет назад, но это может быть полезным в будущем, как это может быть лучшим решением, чем cre псевдоэлементов.

Существует СМЧ isolation свойства, которое позволяет выбрать кастрированный баран дочерний элемент должен быть оказан в контексте своего родителя (auto) или в рамках нового контекста, таким образом, без какого-либо режима наложения приложенного к нему (isolate).

Заканчивать this page примеры

источник

2018-01-06 14:06:26 guillaume

Удалить mix-blend-mode из дочернего элемента

ответ

Смежные вопросы