改变所有元素的不透明度,但一个分区

Question

我试图淡化网页上的所有元素,除了一个div.我已经能够使用以下jQuery淡化所有元素:

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

但是,似乎不透明度是从父元素继承的属性,即使我明确地将div的不透明度设置为1.我现在对任何解决方案都画了一个空白,所以我可以在这里得到一些帮助吗？

Answer 1

如果你想要的是使这个特殊的div在视觉上脱颖而出,你可以考虑一种类似于用于模态窗口/灯箱的方法.使用高z-index绝对定位div,然后使用深色背景颜色和中等不透明度在突出显示的内容和其余内容之间堆叠另一个div.这实际上将"调暗"页面的其余部分,同时仍然保持突出显示的div具有正常的外观.

Answer 2

正如Jimmy Cuadra建议的那样,你可以改变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();
 })