화이트 사업부

div를 (페이지와 0.6의 불투명도 100 %입니다) 반 투명 DIV에 작은 흰색 사업부를 표시하려고 :

<div id="confirmDialogSingle" class="Loading" runat="server" visible="false"> 
<div id="msgBox" class="loadingImg"> 
<br /> You already have a request on the chosen date. Are you sure you want to submit this request?<br /><br /> 
<asp:Button ID="BtnConfirmSingle" runat="server" Text="Yes" Width="60px" onclick="BtnConfirmSingle_Click" />&nbsp; 
<asp:Button ID="BtnNo" runat="server" Text="Cancel" onclick="BtnNo_Click" /> 
</div> 
</div>

을

CSS :

.Loading 
{ 
    width: 100%; 
    height: 100%; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    position: fixed; 
    background: white; 
    opacity:0.6; 
    z-index:9999; 
    transition: width 2s; -moz-transition: width 2s;/* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ 

} 

.loadingImg 
{ 
    opacity: 1; 
    margin: auto; 
    width: 700px; 
    text-align: center; 
    height: 150px; 
    padding: 10px; 
    background-color: white; 
    border:1px solid #d9a0e2; 
}

문제는 작은 사업부 (.loadingImg)가 화면의 중앙에 표시되지 않고있다 (도 50 % 상단 시도하고 50 %를 떠난)과 그 배경은 여전히 존재한다 투명하게 표시됨 흰색의 nstead!

출처

2013-07-31 user1986761

나를 위해 센터를 수평으로 정렬하는 것 같습니다. 세로로 정렬하는 것에 대해 이야기하고 있습니까? 왜냐하면 그게 더 어렵 기 때문이야. – Coop

예 화면 가운데에 가로, 세로로 정렬하기를 원합니다 – user1986761

이 시도 :

.Loading { 
    position:fixed; 
    width:100%; height:100%; 
    top:0; left:0; 
    background: rgba(255,255,255,0.6); 
    z-index:9999; 
    transition: width 2s; -moz-transition: width 2s;/* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ } 

.loadingImg { 
    position: absolute; 
    top: 50%; margin-top:-85px; 
    left:50%; margin-left:-360px; 
    width:700px; height:150px; 
    opacity: 1; 
    text-align: center; 
    padding: 10px; 
    background-color: #FFF; 
    border: 1px solid #d9a0e2; 
}

가 또는 당신은 당신이 얻을 수 있도록해야 .Loading 사업부

출처

2013-07-31 09:40:24 Coop

Div가 화면 중앙에 나타나지 않지만 작은 div (loadingImg)가 첫 번째 div (0.6 불투명도)와 같이 여전히 반투명으로 표시됩니다. S – user1986761

반투명에 대한 답을 편집했습니다. 부모 div에 불투명도를 설정했기 때문에 부모 div의 모든 자식을 동일한 투명성으로 설정했기 때문입니다. 배경색을 반투명으로 설정해야합니다. 콘텐츠의 불투명도가 아닙니다. 이것은 rgba 배경 또는 투명 PNG 배경으로 얻을 수 있습니다. – Coop

완료! 고맙습니다 – user1986761

div를 가운데에 배치하려면 여백 - 왼쪽 및 마진 - 상단을 설정하십시오. 또한 두 div의 배경을 흰색으로 설정합니다. 첫 번째 div의 배경을 투명하게 설정하십시오. 예 :

margin-left: 20%; 
margin-top: 20%;

출처

2013-07-31 09:35:02

두 경우 모두 틀렸어. 이와 같이 여백을 사용하면 모든 화면 크기에서 div가 가운데에 완벽하게 정렬되지 않습니다. 또한 배경 div는 완전히 투명하지 않은 반투명이어야하므로 불투명도가 사용됩니다. – Coop

@cop은 첫 번째 div의 배경을 제거하면 완전히 투명하게 렌더링됩니다. – user1986761

제발 이것 좀 봐 : http : //designshack.net/articles/css/how-to-center-anything-with-css/ 또한 하나의 제안은 "회색"으로 첫 번째 div의 배경을 설정할 수 있습니다 불투명도를 설정하면 좋을 것입니다. –

다음 코드에 배경 이미지로 반투명 PNG 이미지를 사용할 수 있습니다 화면 중앙의 두 번째 div

<div id="confirmDialogSingle" class="Loading" runat="server" visible="false"> 
<table style="height:100%;" align="center"> 
<tr> 
    <td> 
     <div id="msgBox" class="loadingImg"> 
      <br /> You already have a request on the chosen date. Are you sure you want to submit this request?<br /><br /> 
      <asp:Button ID="BtnConfirmSingle" runat="server" Text="Yes" Width="60px" onclick="BtnConfirmSingle_Click" />&nbsp; 
      <asp:Button ID="BtnNo" runat="server" Text="Cancel" onclick="BtnNo_Click" /> 
     </div> 
    </td> 
    </tr> 
</table> 
</div>

불투명도 문제. 첫 번째 div는 실제 불투명도가 아닌 배경색의 불투명도를 변경하려는 경우입니다. 실제 불투명도는 하위 컨트롤에도 영향을 미치기 때문입니다.

background: rgba(255,255,255,0.6);

불투명도 제거 후 위 div에 위 항목을 추가하십시오. 1;

출처

2013-07-31 09:54:56

화이트 사업부

답변

관련 문제