Изменение непрозрачности всех элементов, но одного отделения
Я пытаюсь исчезнуть все элементы на веб-странице за исключением одного отделения. Я смог исчезнуть все элементы со следующим jQuery:
$('*').css('opacity', .3);
Однако кажется, как будто непрозрачность является свойством, которое наследовалось родительским элементам, даже если я явно установил непрозрачность отделения к 1. Я терплю неудачу относительно каких-либо решений прямо сейчас, таким образом, у меня может быть некоторая справка здесь?
4 ответа
Если вы хотите, чтобы этот конкретный блок выделялся визуально, вы можете рассмотреть подход, подобный тому, который используется для модальных окон / лайтбоксов. Разместите div абсолютно с высоким z-индексом, а затем поместите другой div между выделенным и остальным содержимым с темным цветом фона и средней непрозрачностью. Это фактически «затемнит» остальную часть страницы, сохраняя при этом выделенный div в его нормальном виде.
Может быть, вместо того, чтобы использовать селектор * , вы можете сделать его более ориентированным на div или еще много чего, а затем использовать селектор not , чтобы игнорировать тот, который вы хотите оставаться нормальным?
Также есть статья о Непрозрачность CSS , которая не влияет на дочерние элементы, что может быть полезно.
Непрозрачность действительно передается по наследству. Если вы думаете об этом, в любом случае не имеет большого смысла, чтобы прозрачный div содержал непрозрачный div.
Вместо этого вы, вероятно, захотите установить цвет фона блока div на прозрачный. Для этого вам нужно использовать цвета rgba, но имейте в виду, что это поддерживается в меньшем количестве браузеров.
Вы можете прочитать сравнение этих двух, включая их эффекты и реализации, здесь .
Было бы полезно узнать больше. Если рассматриваемый div достаточно отделен от остального содержимого, так что иногда вы хотите отображать его отдельно от всего остального, вы можете рассмотреть возможность реструктуризации страницы, чтобы она не содержалась в родительском div.
Как предложил Джимми Куадра, вы можете изменить положение div, а затем добавить под ним оверлей ... Это похоже на инструменты jQuery Разоблачение делает.
На самом деле вам не нужен плагин для этого, я ответил на другой вопрос, используя аналогичный подход. Этот скрипт удалит оверлей, если вы щелкните в любом месте за пределами выделенного div. Обратите внимание, что для этого необходимо использовать jQuery версии 1.4+
// Relatively position the div to highlight
$('#myDiv').css({
position: 'relative',
top : 0,
left : 0,
zIndex : 100
});
// Add overlay and make clickable
var w = $(window).width();
var h = $(window).height();
var $overlay = $('<div/>', {
'id': 'overlay',
css: {
position : 'absolute',
height : h + 'px',
width : w + 'px',
left : 0,
top : 0,
background : '#000',
opacity : 0.5,
zIndex : 99
}
}).appendTo('body');
// Click overlay to remove
$('#overlay').click(function(){
$(this).remove();
})