如何屏蔽元素

我有一個顯示一堆內容的Web應用程序，我希望某些元素對它們有50％的透明圖像，以便用戶可以看到那裏有什麼，但無法訪問它。如何屏蔽元素

這可以用CSS來完成嗎？

我看過jQuery BlockUI，但我似乎不適合。

2011-03-20 Michael

這是一個可怕的方式來完成這從html和接口的角度來看（非IE瀏覽器和潛在的可訪問性問題不必要的圖像）。我建議輸入disabled =「disabled」方法並通過CSS自定義樣式 - 例如http://jsfiddle.net/kqPjt/1/ – Alex 2011-03-20 20:44:15

你需要做的元素與CSS這樣的：

position: fixed; 
top: 0; 
left: 0; 

height: 100%; 
width: 100%; 

background: black; 
opacity: .5; 
filter: alpha(opacity=50)

2011-03-20 20:00:45 SLaks

不幸的是，這並不能解決問題。我需要黑色的不透明度來防止用戶點擊表單元素（複選框/下拉菜單） – Michael 2011-03-20 20:10:39

@Michael：我忘了'z-index：1234567'。此外，請確保該元素沒有任何定位的父母。 – SLaks 2011-03-20 20:48:34

是的，可以。只要確保需要在前面的元素具有比必須在它們後面的元素更高的z-index。

2011-03-20 20:12:36 Andrew

謝謝。我正在接近一點，但背景仍然背後。不透明度工作正常。此外，我仍然可以點擊應該被阻止的元素中的複選框。 – Michael 2011-03-20 20:34:32

如果您需要阻止某人點擊複選框或選擇框，則最好設置disabled="disabled"屬性代替。

但是如果你堅持與其他元素阻止它，你可以使用relative和absolute定位與下面的HTML包裝DIV：

<div class="wrap"> 
    <select><option>Disabled</option></select> 
    <div class="blocker"></div> 
</div>

和CSS：

.wrap { position:relative; } 
.blocker { 
    background:rgba(0,0,0,0.3); 
    position:absolute; top:0; left:0; 
    width:100%; height:100%; 
}

2011-03-20 20:24:01 mVChr

回答