CSS用於圖像上的半透明內容區域，類似於燈箱

我需要一些CSS來在圖像上顯示半透明框，我將在其中顯示非透明文本或其他內容，類似於lightbox樣式文本描述的工作方式。CSS用於圖像上的半透明內容區域，類似於燈箱

最後我想出了下面的CSS：

.widgetTitle 
{ 
    top: 0; 
    left: 0; 
    height:20px; 
    width:100%; 
    position: absolute; 
} 


.widgetContent 
{ 
    background-color: transparent; 
    bottom: 0; 
    left: 0; 
    position: absolute; 
    width: 310px; 
    padding: 5px 10px 5px 10px; 
    background: url(../images/white.png) repeat;  
} 

.widgetContent h4 
{ 
    margin: 0px; 
    font-size: 20px; 
    color: #ED1666; 
} 

.widgetContent p 
{ 
    color: black; 
    margin-bottom: 0px; 
    padding: 0px; 
    width: 315px; 
}

然後時顯示的項目如下：

<div class="panel"> 
    <a href="some-link"> 
     <img src="/images/image.jpg" style="position:absolute;" /> 
     <div class="widgetContent"> 
      <h4>Some Heading</h4> 
      <p>Some Text</p> 
     </div> 
    </a> 
</div>

似乎工作確定

來源

2012-01-30 hornblow

到目前爲止您嘗試過什麼？這不是一個「gimme the codes」網站。顯示你的嘗試，我們會盡力幫助解決它。但至少表明你已經把**一些**的努力放在這裏。 – 2012-01-30 15:52:21

如果你把它放在jsfiddle.net上，那會讓每個人都更容易。 – 2012-01-30 16:07:38

/* Fallback for web browsers that doesn't support RGBa */ 
background: rgb(0, 0, 0) transparent; 
/* RGBa with 0.6 opacity */ 
background: rgba(0, 0, 0, 0.6); 
/* For IE 5.5 - 7*/ 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); 
/* For IE 8*/ 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";

來源

2012-01-30 15:53:00

rgba支持仍然有限 – Mathletics 2012-01-30 15:55:34

的確如此，我更新了我的答案以獲得更廣泛的兼容性。 – 2012-01-30 15:58:20

越容易最受支持的做法是創建一個半透明的GIF圖塊，並將其作爲background-image在div上。

background:url(/path/to/image.gif) repeat transparent top left

來源

2012-01-30 15:59:32 locrizak

png會不會更好？使用png的唯一例外是IE6。在那種情況下，他可以使用DXImage過濾器並獲得相同的結果。我說png的唯一原因是因爲它給你真正的alpha透明度，而gif只給你指數透明度。 – 2012-01-30 19:13:48

我可能會因爲這個原因使用PNG，但是gif可以在整個板子上工作，因爲你只需要它是一個方形的。 – locrizak 2012-01-30 19:18:25

我從來沒有真正用gif試過它。我可能不得不出於好奇才嘗試。 – 2012-01-30 19:21:37

CSS用於圖像上的半透明內容區域，類似於燈箱

回答

相關問題