Question

我想将身体不透明度改为0.5，除了选择'dd'的聚焦区域。在骨干与coffeescript;

我试过并搜寻了例子; 身体在变，但不是'dd'。

我的代码是：

@$el is selected dd

...

showhide:->
    $('body').css({opacity:0.5});
    @$el.css({opacity:1});

...

Answer 1

你要做的事情是行不通的。如果我们查看opacity specs，我们会看到为什么不：

<强> 3.2。透明度：“不透明度”属性

不透明度可以被认为是后处理操作。从概念上讲，在将元素（包括其后代）渲染为RGBA屏幕外图像后，不透明度设置指定如何将屏幕外渲染混合到当前复合渲染中。
  [...]
  如果对象是容器元素，则效果就好像容器元素的内容使用掩码与当前背景混合，其中掩码的每个像素的值为<alphavalue>。

因此，如果您将<body>的不透明度设置为0.5，那么浏览器将呈现所有<body>（包括其子项，包括您的@$el），然后将其合并到浏览器窗口，Alpha通道值为0.5。结果是整个页面将以半透明度呈现。改变<body>内部内容的不透明度无关紧要，因为在将孩子渲染成<body>时将应用孩子的不透明度，然后<body>之后会应用<div id="outer"> <div id="inner"></div> </div>的不透明度。

考虑这个纯HTML / CSS示例：

#outer {
    /* ... */
    opacity: 0.5;
}
#inner {
    /* ... */
    opacity: 1.0;
}

和

#inner

整个事情看起来半透明，因为opacity: 0.5不透明度实际上是“相对于其父级的不透明度”而不是“相对于浏览器窗口的不透明度”。

演示：http://jsfiddle.net/ambiguous/WtAvx/

你将不得不改变你的方法。例如，您可以在@$el和<body>之间放置<div id="outer"></div> <div id="inner"></div>元素，其结构如下：

#outer {
    /* ... */
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
}
#inner {
    /* ... */
    position: absolute;
    top: 50px;
    left: 50px;
    opacity: 1.0; /* You don't really need this */
}

和

<div>

演示：http://jsfiddle.net/ambiguous/Jsd7q/

您可能需要使用stacking order并在您的元素和opacity: 0.5之间插入绝对定位的<body> {{1}}但我不能再说了在你的问题中提供细节。

Answer 2

为什么不使用

body
{
   background-color:rgba(val,val,val,0.5);//val:0-255
}

并根据需要设置所选dd的不透明度。

Answer 3

试试这段代码：

$('body *').not('textarea:focus').css({opacity:'0.5'});

不透明度0.5除了这个dd

3 个答案: