0

我想将身体不透明度更改为 0.5，除了选择“dd”的焦点区域。在与咖啡脚本的骨干中；

我尝试并搜索了示例；身体改变但不是'dd'。

我的代码是：

@$el is selected dd

...

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

...
4

3 回答 3

1

你试图做的事情是行不通的。如果我们看一下不透明度规格，我们会明白为什么不这样做：

3.2. 透明度：“不透明度”属性

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

因此，如果您将不透明度设置<body>为 0.5，则浏览器将渲染所有<body>（包括其子项，因此包括您的@$el），然后将其合成到浏览器窗口中，Alpha 通道值为 0.5。结果是整个页面将以半透明度呈现。改变内部事物<body>的不透明度无关紧要，因为在渲染孩子时将应用孩子的不透明度<body>，然后再应用孩子的不<body>透明度。

考虑这个纯 HTML/CSS 示例：

<div id="outer">
    <div id="inner"></div>
</div>

和

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

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

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

你将不得不改变你的方法。例如，您可以在您的和opacity: 0.5之间放置一个元素，其结构如下：@$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 */
}

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

您可能不得不使用堆叠顺序并在您的元素之间插入一个绝对定位<div>的 with ，但我不能再多说在您的问题中给出的细节不足。opacity: 0.5<body>

于 2013-07-19T17:46:40.753 回答
1

为什么不使用

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

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

于 2013-07-19T17:59:14.447 回答
-1

试试这个代码：

$('body *').not('textarea:focus').css({opacity:'0.5'});
于 2013-07-19T10:19:18.680 回答