如何使用陰影和不透明度爲ie8中的同一個div

我有下面的代碼，我把一個鏈接用於阻止iframe中的點擊事件。如何使用陰影和不透明度爲ie8中的同一個div

<div id="IframeWrapper" style="position: relative;"> 
    <div id="iframeBlocker"></div> 
    <iframe id="iframewebpage" runat="server"></iframe> 
    </div>

和CSS

#iframeBlocker {   
    background:none transparent ; 
    background-color:White; 
    bottom: 0px; 
    color: White;  
    filter:alpha(opacity=10); 
    opacity: 0.1;    
    display: block;    
    left: 0px;  
    position: absolute; 
    right: 0px; 
    top: 0px;  
    z-index: 1040; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; 
    }

我的問題是。我不能使用不透明度和陰影作爲我的div。如果我使用css代碼來啓用陰影，它不會採用不透明度。

在IE中爲div使用陰影和不透明度的任何解決方法？

來源

2013-08-30 Prakash R

我終於找到了方法。很簡單。

剛剛添加的CSS添加陰影IE8的封閉格「Iframewrapper」

#IframeWrapper { 

     -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; 
    }

因此，而不是將兩個在同一個div的不透明度和陰影的CSS，它的工作原理，如果他們在不同的充div的。

來源

2013-08-30 12:15:05

也許嘗試，而不是不透明使用rgba()如果這符合您的需求。

#iframeBlocker { 
    background:rgba(255, 255, 255, 0.1); 
}

來源

2013-08-30 11:33:08

rgba與使用陰影不透明度具有相同的效果。 :( –

['rgba'在IE8中不受支持]（http://caniuse.com/css3-colors）。 – insertusernamehere

你不能有多個CSS過濾規則，但你可以在單個規則中列出多個過濾器：

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10) 
      progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

閱讀來自MSDN：Creating Multimedia Effects with Visual Filters and Transitions。

來源

2013-08-30 11:33:38 insertusernamehere

用逗號試過，有無空格，但沒有幫助 –

+1謹慎的做這件事，並仔細測試;已知的各種「過濾器」風格之間的不兼容性;有可能你根本無法做到這一點沒有問題 – Spudley

@Spudley感謝您的補充信息 – insertusernamehere

IE8對不透明或陰影支持不好。您已經在代碼中使用了這兩種功能，通過-ms-filter/filter樣式進行排序，但它不符合標準，並且它不是特別好; filer有許多錯誤和怪癖，可能會使它們很難使用。

從理論上講，如果你想使用一個以上的filter風格，您需要將它們合併成一個單一聲明：

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10) 
      progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

（參見：Multiple CSS filters in IE）

@ insertusernamehere的回答幾乎是對，但他錯過了風格的引用，而且它們之間不需要逗號;只是一個空間。

如果這對你有用，那麼好消息。但是，您仍然需要小心，因爲IE支持的各種過濾器樣式有很多已知問題，並且在組合使用時會發現有一些奇怪的結果。你需要仔細測試你是否要走這條路。

值得指出的還有流行的CSS3Pie庫，其中包含多種CSS3功能，包括box-shadow。值得注意的是，他們目前不支持opacity，其原因很大程度上是因爲他們與其支持的其他功能結合使用時遇到的困難。

因此，畢竟，我的最終建議是放棄在IE8中投影的要求。最終，它只是眼睛的糖果，所以它不會影響網站的可用性，如果它丟失了，它會給你帶來很多麻煩，試圖讓它工作。

來源

2013-08-30 12:25:57 Spudley

+1謝謝你也糾正我的答案。 – insertusernamehere

如何使用陰影和不透明度爲ie8中的同一個div

回答

相關問題