代码之家 › 专栏 › 技术社区 › waiwai933

更改除一个div之外的所有元素的不透明度

opacity css-selectors css jquery javascript

waiwai933 · 技术社区 · 15 年前

我正在尝试淡入网页上除一个分区外的所有元素。我已使用以下jquery淡入了所有元素:

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

但是,似乎opacity是继承自父元素的属性,即使我显式地将div的opacity设置为 1 . 我现在对任何解决办法都一无所知,所以我能在这里得到一些帮助吗?

5 回复 | 直到 7 年前

Jimmy Nitzan Tomer 15 年前

如果你想让这个特别的div在视觉上脱颖而出,你可以考虑一种类似于用于模式窗口/灯箱的方法。使用高z索引绝对定位div,然后在突出显示的div和其他内容之间堆叠另一个div,背景色为深色,不透明度为中等。这实际上会“暗淡”页面的其余部分,同时仍然保持突出显示的div的正常外观。

Mottie 15 年前

正如Jimmy Cuadra建议的,你可以改变div的位置,然后在它下面添加一个覆盖层…这类似于jquery工具 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();
 })

Roman 15 年前

也许不是做 * 选择器可以使其更针对div或其他对象,然后使用 not 选择忽略要保持正常的那个?

还有一篇关于 CSS Opacity 这不会影响那些可能有用的孩子。

Rupert Madden-Abbott 15 年前

不透明确实是遗传的。如果你仔细想想,透明div包含非透明div没有多大意义。

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

您可以阅读这两种方法的比较,包括它们的效果和实现, here .

更多的信息会有帮助。如果所讨论的div与其他内容的间隔足够大,以至于您偶尔希望将其与其他内容隔离显示,则您可能希望考虑重新构造页面,使其不包含在父div中。

jibai31 7 年前

一种很酷的技术是在div上应用一个大的轮廓,它也可以处理一个大的框阴影。区别是详细的 here .

定义一个css类,比如 highlight ,使用该属性:

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

在javascript中,您只需将该类应用于div:

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