Изменение непрозрачности всех элементов, кроме одного Div - PullRequest
Новая
       10

Изменение непрозрачности всех элементов, кроме одного Div

5 голосов
/ 18 апреля 2010

Я пытаюсь потушить все элементы на веб-странице, кроме одного div. Я был в состоянии исчезнуть все элементы с помощью следующего jQuery: 

$('*').css('opacity', .3);

Однако кажется, что непрозрачность - это свойство, которое наследуется от родительских элементов, даже если я явно установил непрозрачность div в 1. Я сейчас рисую пробел в отношении любых решений, так что я могу помочь?

Ответы [ 5 ]

12 голосов
/ 18 апреля 2010

Если вы хотите, чтобы этот конкретный div выделялся визуально, вы можете рассмотреть подход, подобный тому, который используется для модальных окон / лайтбоксов. Расположите div абсолютно с высоким z-индексом, а затем поместите другой div между выделенным и остальным содержимым с темным фоновым цветом и средней непрозрачностью. Это фактически «затемнит» остальную часть страницы, сохраняя выделенный элемент div с его обычным появлением.

5 голосов
/ 18 апреля 2010

Как предложил Джимми Куадра, вы можете изменить положение элемента div и добавить наложение под ним ... Это похоже на то, что делает jQuery Tools Expose .

Вам не нужен плагин для этого, хотя я ответил на другой вопрос с подобным подходом. Этот скрипт удалит оверлей, если вы щелкнете где-нибудь за пределами выделенного элемента 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();
 })
2 голосов
/ 18 апреля 2010

Может быть, вместо того, чтобы делать селектор *, вы можете сделать его более нацеленным на div или что-то еще, а затем использовать селектор not , чтобы игнорировать тот, который вы хотите оставить нормальным?

Есть также статья о Непрозрачность CSS , которая не затрагивает детей, которые могут быть полезны.

0 голосов
/ 14 февраля 2018

Крутая техника состоит в применении большого контура к div. Это работает с большой коробкой-тенью. Различия детализированы здесь .

Определите класс CSS, например highlight, с этим свойством: 

.highlight {
  outline: 9999px solid rgba(0,0,0,0.5);
}

В Javascript вы можете просто применить этот класс к вашему div: 

$('#mydiv').addClass('highlight');
0 голосов
/ 18 апреля 2010

Непрозрачность действительно наследуется. Если вы думаете об этом, то не имеет смысла для прозрачного div в любом случае содержать непрозрачный div.

Вместо этого вы, вероятно, захотите сделать цвет фона прозрачным. Для этого вам нужно использовать цвета rgba, но имейте в виду, что это поддерживается в меньшем количестве браузеров.

Вы можете прочитать сравнение двух, включая их эффекты и реализации, здесь .

Дополнительная информация будет полезна. Если рассматриваемый div достаточно отделен от остального содержимого, так что иногда вы хотите отображать его отдельно от всего остального, вы можете рассмотреть реструктуризацию страницы, чтобы она не содержалась в родительском div. 1009 *

...