我需要一些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>
似乎工作確定
到目前爲止您嘗試過什麼?這不是一個「gimme the codes」網站。顯示你的嘗試,我們會盡力幫助解決它。但至少表明你已經把**一些**的努力放在這裏。 – 2012-01-30 15:52:21
如果你把它放在jsfiddle.net上,那會讓每個人都更容易。 – 2012-01-30 16:07:38