¿Es posible tener dos colores de fondo para un solo elemento html?

css background

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo se puede aplicar múltiples colores de fondo a un div 6 respuestas

Estoy tratando de agregar 2 colores de fondo diferentes a la misma clase CSS.

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 4px;
    background-color: #d6d6c2;
    z-order: 0;

}

¿Es posible tener un color de fondo para el primer 50% (considerando el ancho total) y otro color de fondo para el resto? Si no se puede lograr, ¿alguien puede sugerirme un truco para lograr esto?

Answer 1

Puede agregar una posición relativa div con pseudoclase de posición absoluta al 50% de altura.

Ejemplo:

.the-double-color {
  height:100vh;
  background-color:red;
  position:relative;
  width:100%;
}

.the-double-color:before {
  content:'''';
  background-color:blue;
  position:absolute;
  top:0px;
  height:50%;
  width:100%;
}

Aqui esta la pen

Answer 2

Puede usar gradientes de fondo para eso.

.stepwizard-row:before {
    background-image: linear-gradient(to right, #f00 50%, #ff0 50%)
}

Comprueba este violín: https://jsfiddle.net/Lecazndk/

Con eso también puedes crear efectos interesantes y también usar más de dos colores.

https://jsfiddle.net/Lecazndk/1/

Un buen ejemplo de este caso de uso es el encabezado de héroe en el sitio web de Stripe: https://stripe.com/

Answer 3

Simplemente use el degradado lineal como fondo y puede ajustar fácilmente la dirección, los colores y el% de cada color:

body {
  margin: 0;
  background: linear-gradient(to right, red 50%, blue 0%);
  
  height:100vh;
  text-align:center;
  color:#fff;
}

some content

body {
  margin: 0;
  background: linear-gradient(to bottom, red 60%, blue 0%);
  
  height:100vh;
  text-align:center;
  color:#fff;
}

some content

O con el pseudo-elemento y el color de fondo simple, simplemente controle la posición / tamaño del pseudo-elemento para controlar ambos fondos:

body {
  margin: 0;
  background: red;
  height: 100vh;
  position: relative;
  text-align:center;
  color:#fff;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
  background: blue;
  z-index:-1;
}

some content

body {
  margin: 0;
  background: red;
  height: 100vh;
  position: relative;
  text-align:center;
  color:#fff;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 40%;
  left: 0;
  right: 0;
  background: blue;
  z-index:-1;
}

some content

Si quieres mas

Puede combinar diferentes colores dentro del degradado y también usar múltiples fondos lineales para lograr una división de color más compleja para su fondo:

body {
  margin: 0;
  background:linear-gradient(30deg, red 50%, blue 50%, blue 70%,orange 70%) left/50% 100% no-repeat,              
              linear-gradient(-30deg, red 50%, blue 50%, blue 70%,orange 70%) right/50% 100% no-repeat;
  
  height:100vh;
  text-align:center;
  color:#fff;
}

some content

También puede hacer lo mismo con el pseudo elemento y también usar alguna transformación CSS (rotación, sesgo, etc.):

body {
  margin: 0;
  background: red;
  height: 100vh;
  position: relative;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: 50%;
  background: blue;
  transform: skew(30deg);
  z-index: -1;
}

body:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: -50%;
  background: orange;
  transform: skew(-30deg);
  z-index: -1;
}

some content