CSS를 사용하여 하나의 Div에서 여러 배경색을 얻는 방법은 무엇입니까?

하나의 Div에서 여러 배경색 얻기

CSS에서는 다양한 기술을 통해 단일 div에 여러 배경색을 적용할 수 있습니다. 다양한 시나리오의 몇 가지 옵션을 살펴보겠습니다.

시나리오 1: 두 개의 동일한 부분이 있는 Div

각각 서로 다른 색상을 갖는 두 개의 동일한 부분으로 구성된 div를 만들려면 선형 그라데이션을 사용할 수 있습니다. 예를 들어, 이미지의 "A"에 표시된 효과를 얻으려면 다음 CSS를 사용할 수 있습니다.

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

이 그라데이션은 4개의 위치를 ​​사용하여 색상 전환을 지정합니다. 첫 번째와 두 번째 위치는 0%에서 50%까지 어두운 회색을 정의하고, 세 번째와 네 번째 위치는 50%에서 100%까지 밝은 회색을 정의합니다.

시나리오 2: 같지 않은 Div 부분

다른 높이의 부분을 포함하는 div를 생성하려면 선형 그래디언트를 의사 요소와 결합할 수 있습니다. 예를 들어 파란색 부분이 다른 부분보다 높이가 작은 이미지의 "C" 효과를 얻으려면 다음 CSS를 사용합니다.

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%;
  background-color: white;
}

이 시나리오에서는 의사- 요소(:after)가 div에 추가됩니다. 이 요소는 "더 작은" 파란색 부분의 역할을 합니다. 너비는 50%, 높이는 20%로 div의 오른쪽 하단 모서리에 절대 위치합니다. 배경색은 흰색으로 설정되어 파란색 부분을 오버레이하여 원하는 효과를 얻습니다.

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