상단 요소의 투명도 얻기

Question

웹 사이트를 만들고 있는데 하늘색의 배경이 있고 그 위에 흰색의 투명 사각형이 있습니다. 그럼 난 내 실제 정보가 될 것입니다 사업부가 모두 거기에, 나는 시도하고 투명 사각형 위의 내 메인 페이지에 배경 색상을 줄 때,이 요소는 또한이

<div id = "transparent"> 

<div id = "yourinfo"> 

<div id = "profileinfo"> 
    <span id = "yourname"> Name </span> 
    <br> 
    <span> View </span> 

</div> 

</div> 

</div> 

처럼 배치 투명,이 투명도를 제거하고이 요소를 투명 사각형의 꼭대기처럼 보이게하려면 어떻게해야합니까?

다음은 CSS 불투명도 어린이 요소에 적용 이러한 요소

div#transparent{ 
    margin: 40px 40px auto; 
    margin-top:0px; 
    height: 620px; 
    background-color: white; 
    opacity:.3; 
    padding: 20px; 
} 

div#yourinfo{ 
    width: 350px; 
    height: 250px; 
    background-color: red; 
    border: 1px solid gray; 
    opacity:1; 
    -webkit-border-radius: 15px; 
    padding:10px; 
} 

Answer 1

내 CSS입니다. 원하는 것을 달성하려면 background-color 선언에서 rgba (RGB 플러스 알파/투명성 채널)을 사용해야합니다.

예를 들면 :

#transparent { 
    background-color: rgba(255,255,255,0.3) 
} 

당신이 해결 방법을 찾아해야 할 수도 있으므로이 방법은, IE8 < 작동하지 않음을주의하십시오. 투명 .png (옛날과 같음)을 사용하거나 일부 조건부 스타일 시트와 Microsoft Internet Explorer proprietary syntax을 사용하십시오.

또한 분명히이 방법은 에 반투명 텍스트를 사용하지 않으려는 경우에만 작동합니다. div에서 모든 텍스트가 100 % 불투명 해집니다. 따라서 텍스트 색상과 동일한 CSS3 구문을 사용할 수 있습니다.