CSS 그라디언트를 사용하여 단일 Div에 여러 배경색을 적용하는 방법은 무엇입니까?

단일 Div에 여러 배경색 적용

단일 div 내에서 여러 배경색을 구현하기 위해 CSS는 선형을 지원하는 배경 속성을 제공합니다. 그라디언트. 설명한 시나리오를 구현하는 방법은 다음과 같습니다.

시나리오 1: 분할 색상 Div 생성(A)

분할 배경으로 div를 생성하려면 (이미지의 "A"와 유사) 4가지 색상의 선형 그래디언트를 사용합니다. 중지:

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

시나리오 2: 한 부분을 다른 부분보다 작게 만들기(C)

"C" 시나리오에서는 파란색 부분을 만들고 싶습니다. 키가 작아요. 이는 흰색 배경과 함께 :after 의사 요소를 사용하여 달성할 수 있습니다:

div.C {
  background: linear-gradient(
    to right,
    #9c9e9f 0%,
    #9c9e9f 50%,
    #33ccff 50%,
    #33ccff 100%
  );
}

div.C:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 20%; /* Adjust this value to control the height of the blue portion */
  background-color: white;
}

참고: 더 나은 브라우저 간 호환성을 위해 배경 속성에 공급업체 접두사 사용을 고려하세요. 제공된 코드 조각에서 볼 수 있듯이

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