.cuadrado {
    border: 1px solid lightgray;
    width: 150px;
    height: 40px;
    margin: 5px;
}

div { background-color: rgba(0, 0, 255, 0.2) ; }

div + div { background-color: rgba(0, 0, 255, 0.4) ; }

div + div + div { background-color: rgba(0, 0, 255, 0.7) ; }

div + div + div + div { background-color: rgba(0, 0, 255, 1) ; }

:nth-child(8) { background-color: yellow; }

div :nth-child(1) { background-color: rgba(0, 255, 0, 0.2); }

div :nth-child(2) { background-color: rgba(0, 255, 0, 0.4); }

div :nth-child(3) { background-color: rgba(0, 255, 0, 0.7); }

div :nth-child(4) { background-color: rgba(0, 255, 0, 1); }

:nth-child(10) { background-image: url("../fondos1/imgs_fondos/zorro.png"); }

:nth-child(10) :nth-child(1) {
    background-color: rgba(255, 81, 0, 0.2);
}

:nth-child(10) :nth-child(2) {
    background-color: rgba(255, 81, 0, 0.4);
}

:nth-child(10) :nth-child(3) {
    background-color: rgba(255, 81, 0, 0.7);
}

:nth-child(10) :nth-child(4) {
    background-color: rgba(255, 81, 0, 1);
}

:nth-child(12) {
    background-image: url("../fondos1/imgs_fondos/zorro.png");
}

.textogrande {
    font-family: 'Courier New', Courier, monospace;
    font-size: 60;
    color: rgba(255, 0, 0, 0.5);
    font-weight: bold;
}

div + .textogrande {
    color: rgba(255, 0, 0, 0.8);
}