투명한 오버레이와 여러 열이 있는 전체 너비 부트스트랩 배경을 만드는 방법은 무엇입니까?

투명 색상 오버레이와 여러 열이 포함된 전체 너비 Bootstrap 배경

Bootstrap 3에서는 투명 색상 오버레이로 전체 너비 배경 구현 여러 열을 유지하는 것은 어려울 수 있습니다. 이를 탐색하려면 이전 문의에서 설명한 기술을 활용하고 이를 확장하여 열 요소를 통합할 수 있습니다.

Codepen 예제에서 제공되는 코드 데모는 구현을 효과적으로 보여줍니다. 참조용 관련 코드 조각은 다음과 같습니다.

<div class="container extra">
  <div class="row">
    <div class="col-sm-4 left"></div>
    <div class="col-sm-8 right"></div>
  </div>
</div>

.container {
  width: 50%;
  margin: auto;
  margin-top: 1em;
  position: relative;
  overflow: visible;
}

.extra:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translate(-50%, 0);
}

[class*="col"] {
  border: 2px solid grey;
  min-height: 120px;
  position: relative;
}

.left:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100vw;
  top: 0;
  right: 0;
  background: rgba(255, 0, 0, 0.5);
}

.right:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100vw;
  top: 0;
  left: 0;
  background: rgba(0, 0, 255, 0.25);
}

이 접근 방식에는 전체 레이아웃의 컨테이너 역할을 하는 'extra' 클래스를 사용하여 추가 요소를 생성하는 작업이 포함됩니다. 이 '추가' 요소 내에는 '컨테이너' 클래스가 있는 기본 콘텐츠 컨테이너가 있습니다. 열 상단에 색상 오버레이를 배치하려면 '왼쪽' 및 '오른쪽' 열 클래스에서 ':before' 의사 요소를 활용하면 요소의 실제 콘텐츠 앞에 콘텐츠를 추가할 수 있습니다. 이러한 의사 요소의 너비와 높이를 100vw 및 100%로 설정하면 열의 전체 너비와 높이를 덮을 수 있습니다. 마지막으로 'rgba()' 함수를 사용하여 투명한 색상을 지정할 수 있습니다. 여기서 마지막 값은 투명도 수준을 나타냅니다(0은 투명, 1은 완전 불투명).

위 내용은 투명한 오버레이와 여러 열이 있는 전체 너비 부트스트랩 배경을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!