단일 DIV의 여러 배경색

DIV 요소에서 색상 분할 달성

DIV 요소를 여러 색상 섹션으로 나누려면 색상 섹션 수를 조정하세요. 선형 그래디언트의 색상 중지 값. 예를 들어, 두 개의 섹션을 만들려면 세 가지 색상이 필요하고, 네 개의 섹션을 만들려면 네 가지 색상이 필요합니다. 각 색상 전환이 발생하는 비율을 지정하여 원하는 색상 분할을 만들 수 있습니다.

색상 섹션 크기 제어

한 섹션을 전체 색상보다 작게 만들려면 다른 경우에는 CSS :after 의사 요소를 사용하세요. 이 요소는 독립적으로 크기와 위치를 조정할 수 있는 오버레이를 만듭니다. :after 요소에 대비되는 배경색을 적용하면 DIV를 물리적으로 분할하지 않고도 더 작은 색상 섹션의 환상을 만들 수 있습니다.

다음은 더 나은 크로스 브라우저 지원으로 개선된 예입니다.

.two-colors {
  background: linear-gradient(
    to right,
    #9c9e9f 0%,
    #9c9e9f 50%,
    #f6f6f6 50%,
    #f6f6f6 100%
  );
}

로그인 후 복사

B. 세 가지 색상 섹션

.three-colors {
  background: linear-gradient(
    to right,
    #9c9e9f 0%,
    #9c9e9f 33%,
    #f6f6f6 33%,
    #f6f6f6 66%,
    #33ccff 66%,
    #33ccff 100%
  );
}

로그인 후 복사

C. 더 작은 파란색 섹션

.smaller-blue {
  background: linear-gradient(
    to right,
    #9c9e9f 0%,
    #9c9e9f 50%,
    #33ccff 50%,
    #33ccff 100%
  );
  position: relative;
}

.smaller-blue:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 25%;
  height: 20%;
  background-color: white;
}

로그인 후 복사

이 예는 단일 DIV 요소에서 여러 배경색을 구현하고 :after 의사 요소를 사용하여 크기를 제어하는 방법을 보여 주며, 복잡한 색상을 디자인하는 다양한 방법을 제공합니다. 추가 HTML 요소가 필요 없는 패턴입니다.

위 내용은 단일 DIV 요소에 여러 배경색을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!