jQuery youtube调暗效果

Question

在某些页面上，youtube使用“关闭灯光”功能。

在jQuery中也可以做到这一点。 Example

该示例使整个页面背景变暗，但视频播放器保持顶部。为什么这样？

什么是最明显的方式来暗淡除视频之外的所有div？

Answer 1

您可以通过创建覆盖整个页面的“blanket”div，将其设置为黑色背景，半透明和z-index高于所有其他页面元素。然后，您将视频播放器的z-index设置为高于全部div，因此不会被覆盖。

类似：

#blanket { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 100; 
    display: none; 
    opacity: 0.5; /* Will need to use a filter rule to make this work in IE */ 
} 

#video-player { 
    position: relative /* z-index doesn't work unless positioned */ 
    z-index: 200; 
} 

jQuery("#blanket").show();