단순한 반투명 배경색의 경우 위의 솔루션 (CSS3 또는 bg 이미지)이 가장 적합합니다. 그러나보다 멋진 작업 (예 : 애니메이션, 여러 배경 등)을 원하거나 CSS3에 의존하고 싶지 않은 경우 "창 기술"을 사용해 볼 수 있습니다.
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
}
.pane > .back {
position: absolute;
width: 100%; height: 100%;
top: auto; bottom: auto; left: auto; right: auto;
}
.pane > .cont {
position: relative;
z-index: 10;
}
<p class="pane">
<span class="back" style="background-color: green; opacity: 0.6;"></span>
<span class="cont" style="color: white;">Hello world</span>
</p>
이 기술은 외부 구획 요소 내부에 두 개의 "계층"을 사용하여 작동합니다.
- 내용의 흐름에 영향을 미치지 않고 창 요소의 크기에 맞는 하나 ( "뒤로")
- 내용을 포함하고 창의 크기를 결정하는 데 도움이되는 하나 ( "계속").
position: relative창에서 중요하다; 창 크기에 맞게 레이어를 알려줍니다. ( <p>태그가 절대적이어야 하는 경우 , 분할 창을 a에서 a <p>로 변경하고 <span>모든 것을 절대 위치 <p>태그로 감싸십시오 .)
이 기술이 위에 나열된 유사한 기술에 비해 가장 큰 장점은 분할 창이 지정된 크기 일 필요는 없다는 것입니다. 위에서 코딩 한 것처럼 전체 너비 (일반 블록 요소 레이아웃)에 적합하고 내용만큼만 적합합니다. 바깥 쪽 창 요소는 직사각형 인 한 원하는대로 크기를 조정할 수 있습니다 (즉, 인라인 블록이 작동하고 일반 오래된 인라인은 작동하지 않음).
또한 배경에 많은 자유를줍니다. 실제로 back 요소에 무엇이든 넣을 수 있으며 내용의 흐름에 영향을 미치지 않습니다 (여러 개의 전체 크기 하위 레이어를 원한다면 위치, 절대, 너비 / 높이 : 100 %, 위 / 아래 / 왼쪽 / 오른쪽 : 자동).
배경 삽입 조정 (위 / 아래 / 왼쪽 / 오른쪽) 및 / 또는 배경 고정 (왼쪽 / 오른쪽 또는 위 / 아래 쌍 중 하나를 제거하여)을 허용하는 한 가지 변형은 다음 CSS를 대신 사용하는 것입니다.
.pane > .back {
position: absolute;
width: auto; height: auto;
top: 0px; bottom: 0px; left: 0px; right: 0px;
}
작성된 바와 같이 이것은 Firefox, Safari, Chrome, IE8 + 및 Opera에서 작동하지만 IE7 및 IE6에는 추가 CSS 및 표현식, IIRC가 필요하지만 마지막으로 확인했을 때 두 번째 CSS 변형은 Opera에서 작동하지 않습니다.
주의 사항 :
- 연속 레이어 내부의 플로팅 요소는 포함되지 않습니다. 당신은 그들이 정리 또는 다른 방법으로 포함되어 있는지 확인해야합니다, 또는 그들은 바닥에서 미끄러 져 나옵니다.
- 여백은 pane 요소로 이동하고 pading은 cont 요소로 이동합니다. 반대편 (콘트의 여백 또는 패인의 여백)을 사용하지 마십시오. 그렇지 않으면 페이지가 항상 브라우저 창보다 약간 넓은 것과 같은 이상한 점이 발견됩니다.
- 언급했듯이 모든 것은 블록 또는 인라인 블록이어야합니다. CSS를 단순화 하기 위해
<div>s 대신 을 사용 <span>하십시오.
이 기술의 유연성을 display: inline-block, auto및 특정 widths / min-heights 와 함께 사용하여 보여주는보다 풍부한 데모
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
width: 175px; min-height: 100px;
margin: 8px;
}
.pane > .back {
position: absolute; z-index: 1;
width: auto; height: auto;
top: 8px; bottom: 8px; left: 8px; right: 8px;
}
.pane > .cont {
position: relative; z-index: 10;
}
.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
다음 은이 기술을 광범위하게 사용하는 데모 입니다.
