Bootstrap 3을 사용하여 투명한 색상 오버레이로 전체 너비 배경을 만드는 방법은 무엇입니까?

투명한 색상 오버레이가 포함된 Bootstrap 전체 너비 배경

Bootstrap 3을 사용하여 투명한 색상 오버레이가 포함된 전체 너비 배경 이미지를 만드는 것은 어렵게 보일 수 있습니다. , 하지만 영리한 기술이 있으면 가능합니다.

이를 달성하려면 절대 위치 지정, 의사 요소 및 색상 오버레이의 조합을 활용하게 됩니다.

HTML 구조:

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

CSS 스타일:

.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);
}
.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);
}

설명:

• .container 요소는 특정 너비로 ​​설정되고 자동 여백으로 중앙에 배치됩니다.
• 컨테이너 너비를 뷰포트 이상으로 확장하기 위해 의사 요소 .extra:before가 추가되었습니다. 전체 너비 배경의 환상을 만듭니다.
• 시각화를 위해 .col 요소에 단색 테두리가 제공됩니다.
• .left 및 .right 내의 의사 요소는 투명한 색상 오버레이 역할을 하여 배경을 덮습니다.

이 기술을 사용하면 Bootstrap 3을 사용하여 원하는 배경 및 오버레이 효과를 쉽게 얻을 수 있습니다.

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