1. 首頁
  2. 問答
  3. 我想在包含材質的div上添加透明覆蓋圖，我該如何做？

我想在包含材質的div上添加透明覆蓋圖，我該如何做？

2012-10-18 19 views
0

透明覆蓋圖應該是灰色的，並且應該包含阻止使用它在瀏覽器中覆蓋的div的進度條，直到進度條完成。我也希望不使用閃光燈。我將如何做到這一點？我想在包含材質的div上添加透明覆蓋圖，我該如何做？

div.transparent_lists 
{ 
clear:both; 
border-top-style:solid; 
border-bottom-style:solid; 
opacity:0.6; 
filter:alpha(opacity=60); 
border-bottom-color: #A9A9A9; 
border-top-color: #A9A9A9; 
border-bottom-width: thin; 
border-top-width: thin; 
z-index: 1000; 
display: block; 
height: 20px; 
position: absolute; 
}

來源

2012-10-18 user1074316

回答

1

你可以這樣做：

<div id="parent" style="position:relative;height:200px;width:200px;overflow:hidden;"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam 
    <div id="overlay" style="position:absolute;top:0px;left:0px;width:200px;height:200px;background-color:#ccc;opacity:.8;padding-top:90px;text-align:center;"> 
     Content for overlay here 
    </div> 
</div>

而且你可以隱藏/顯示覆蓋元素，因爲你需要。

來源

2012-10-18 20:29:13 Sol

1

設置父position: relative和透明孩子position: absolute：

div { 
    width: 500px; 
    height: 200px; 
    position: relative; 
} 

div div { 
    width: 100px; 
    height: 50px; 
    background: black; 
    opacity: 0.5; 
    position: absolute; 
    top: 50px; 
    left: 200px; 
}

Demo

來源

2012-10-18 20:29:20 bookcasey

相關問題

 相關問題