How to Apply Multiple Background Colors to a Single Div?

Applying Multiple Background Colors to a Single div

In certain situations, applying multiple background colors to a single div can be useful. This eliminates the need for additional divs or background images, making it a visually appealing and straightforward task.

Scenario 1: Achieving a Uniform Double-Colored Division

To create a simple two-colored division resembling "A" in the provided image, you can use a linear gradient as follows:

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

This approach, however, may result in a gradient without the sharp color transition as seen in "A." To rectify this, use a gradient with four positions, assigning the first color (dark gray) from 0% to 50%, and the second color (light gray) from 50% to 100%.

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

Scenario 2: Controlling the Size of Multiple Background Colors

To create a smaller section within a division, like the blue section in "C," you can use a similar linear gradient with four positions, but add an :after selector with a white background to simulate a smaller second section.

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

The above is the detailed content of How to Apply Multiple Background Colors to a Single Div?. For more information, please follow other related articles on the PHP Chinese website!