DemoИмея вопрос о: нет (.class) Selector и CSS3 фильтр
Я пытаюсь применить фильтр только родительский DIV и пропуская этот фильтр для ребенка DIV с помощью CSS
: нет (.class) {}
селектор, как
.main:not(.nofilter) {
-webkit-filter: blur(3px);
}
, но, как вы можете видеть в демофильме, фильтр подает заявку на дочерний div .nofilter! Не могли бы вы дать мне знать, как это исправить?
Благодаря
nofilter не применяется к самому родителю, а к элементу ребенка Див. Поэтому .main:not(.nofilter) будет соответствовать .main.
Я пытаюсь применить фильтр только родительский DIV и пропуская этот фильтр для ребенка DIV
я боюсь, что это не возможно. То же самое происходит, когда вы пытаетесь переопределить родительский элемент opacity для дочернего элемента.
В качестве альтернативы, если вы хотите применить фильтр размытия только фоновое изображение, здесь обходной путь:
Обратите внимание, что OP хочет пропустить дочерние элементы из эффекта размытия, невозможного – DaniP
на самом деле, да, я хочу пропустить дочерний фильтр – user3649067
Вы должны будете обратиться к детям напрямую и применять: нет (), а затем
.main > div:not(.nofilter) {
-webkit-filter: blur(3px);
}
Спасибо, но это не работает для обоих! если вы удалите второе изображение, вы увидите, что для первого нет фильтра. – user3649067
Одна из проблем заключается в том, что для изображения есть только один источник. Кроме того, способ структурирования html накладывает изображения. Таким образом, вы действительно видите только .nofilter div, а не главный div. Получите два разных изображения и сделайте их в div внутри содержащего div, чтобы изображения не накладывались друг на друга. вот рабочий пример http://jsfiddle.net/k678hqt8/17/ – user2671355
да, но проблема в том, что я не могу изменить порядок пользовательского интерфейса, который я получаю в формате пользовательского интерфейса jQuery. – user3649067
Фильтр и свойства, такие как непрозрачность для некоторого элемента, будут влиять на весь элемент, включая дочерние элементы. – DaniP