단일 DIV 요소에 여러 배경색을 만드는 방법은 무엇입니까?

단일 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!