设置除一个元素外的所有元素以使背景变暗 [英] Style all but one element to dim background

问题描述

试图通过使页面上除一个元素之外的所有元素变暗(或更改其不透明度)来实现变暗的背景效果；我一直在尝试:not()以及一些jQuery选择器，尝试并排除除元素之外的所有元素，但无济于事.有谁知道用SASS/Compass或jQuery失败的最佳方法?

Looking to achieve a dimmed-background effect by dimming (or changing the opacity of) all elements on the page but one; I've been trying out :not() as well as some jQuery selectors to try and exclude all but the element, but to no avail. Does anyone know of the best way to do this with SASS/Compass or, failing that, jQuery?

到目前为止，我已经尝试过类似的事情:

So far, I've tried things like:

.opacityFade:not(.classToExclude) {
   STYLES HERE
 }

或

   $('controlElement').click(function(){
     $(body).not('desiredTargetToExclude').toggleClass('classThatFadesStuffOut');
});

理想情况下，我想避免不得不编写更多的JS和更好的单独职责，但是可能没有办法做到这一点.前端开发的新手很少，因此我不知道执行此操作的最佳方法.谢谢！

Ideally, I'd like to avoid having to write more JS and better separate responsibilities,but there might not be a way to do that. Little new to Front-End development, so I'm not aware of a best way to go about doing this; thanks!!

推荐答案

您可以通过在所有元素上放置一条毯子，然后使用z-index属性将要显示的元素从DOM顺序中拉出来实现此目的

You can achieve this by placing a blanket over all elements, and then pulling the element you want to display out of the DOM order with the z-index property

.item {
    background: #f00;
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 10px;
}

.item.selected {
    position: relative;
    z-index: 200
}

.blanket {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.5;
    z-index: 100;
}

请注意，该元素必须具有非静态位置.

Note that the element needs to have a non static position.

请参见 http://jsfiddle.net/cyberdash/fCMaT/

这篇关于设置除一个元素外的所有元素以使背景变暗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！