不透明度0.5，除了這個dd

我想改變身體不透明度爲0.5，除了選定的重點區域'dd'。與coffeescript骨幹;不透明度0.5，除了這個dd

我試過搜索例子; 身體變化，但不'dd'。

我的代碼是：

@$el is selected dd 

... 

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

...

來源

2013-07-19 Yilmazerhakan

你正在試圖做將不起作用怎麼辦。如果我們看看opacity specs，我們將看到爲什麼不能：

3.2。透明度：「不透明度」屬性

不透明度可以被認爲是後處理操作。從概念上講，在元素（包括其後代）被渲染成RGBA離屏圖像後，不透明度設置指定如何將離屏渲染混合到當前合成渲染中。

如果對象是一個容器元素，那麼效果就好像容器元素的內容使用掩碼的當前背景混合，其中掩碼的每個像素的值爲<alphavalue>。

所以，如果你的<body>的不透明度設置爲0.5，那麼瀏覽器就會呈現所有的<body>（包括其子等等，包括你的@$el），然後用0.5的alpha通道值的複合是在瀏覽器窗口。結果是整個頁面將呈現半透明。改變<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/

你不得不改變你的方法。例如，你可以定位你的@$el和<body>之間的opacity: 0.5元素，像這樣的結構：

<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/

你可能不得不玩與stacking order並插入一個絕對定位<div>與opacity: 0.5之間的元素和<body>但我在你的問題中不能再提供很少的細節。

來源

2013-07-19 17:46:40

感謝您的詳細幫助，它給了我新的想法... – Yilmazerhakan

-1

試試這個代碼：

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

來源

2013-07-19 10:19:18

謝謝，但一切都不爲0不透明 – Yilmazerhakan

和惠特報價？ –

CSS的不透明度不適用於這種方式。 –

爲什麼不使用

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

，並設置選擇DD的不透明度，你的願望。

來源

2013-07-19 17:59:14 Madeyedexter

不透明度0.5，除了這個dd

回答

相關問題