라이트 박스와 비슷한 이미지 위에 반투명 콘텐츠 영역을위한 CSS

Question

라이트 박스 스타일의 텍스트 설명이 작동하는 방식과 유사하게 투명하지 않은 텍스트 나 다른 내용을 표시 할 이미지 위에 반투명 상자를 표시하려면 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; 
} 

그리고 다음 항목이 표시됩니다 :

나는 다음과 같은 CSS를 함께 올라오고 결국

<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> 

확인을 작동하는 것 같다

Answer 1

/* 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)"; 

Answer 2

더 쉬운 이 작업을 수행하는 데 가장 지원되는 방법은 반투명 gif 타일을 만들어 background-image div에.

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