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();
 })

Answer 3

也许不是使用*选择器，而是可以让它更多地针对div或诸如此类的东西，然后使用not选择器来忽略你想要保持正常的那个？

CSS Opacity上的这篇文章也不会影响可能有用的儿童。

Answer 4

不透明度确实是遗传的。如果你考虑一下，无论如何透明div包含一个非透明的div都没有多大意义。

您可能希望将div的背景颜色设置为透明。要做到这一点，您需要使用rgba颜色，但请记住，这在较少的浏览器中是受支持的。

您可以阅读两者的比较，包括它们的效果和实现，here。

更多信息会有所帮助。如果有问题的div与内容的其余部分充分分离，有时候，您希望将其显示为与其他所有内容隔离，您可能希望考虑重构页面，使其不包含在父div中。 / p>

Answer 5

一种很酷的技术包括在div上应用一个大的轮廓。它也适用于大型盒子阴影。差异详细here。

使用该属性定义CSS类，如highlight：

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

在Javascript中，您可以将该类应用于您的div：

$('#mydiv').addClass('highlight');

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

5 个答案: