Solucionado
não entendi como funciona a transição de 1px do gradiente e o pq quando foi definido o
background-size: 20px 20px;o gradiente se repetiu
background-image: linear-gradient(135deg, transparent, transparent 14px, rgba(0,0,0,.1) 14px, rgba(0,0,0,.1) 15px, transparent 15px, transparent);
background-size: 20px 20px;
background-attachment: fixed;
}
Vamos começar pelo grandiente, vamos quebrar o código abaixo em etapas, imagine um quadro, a cada virgula seria uma etapa de inicio até que parte ele vai ficar desse jeito. Então vamos lá quebrando o código do gradiente vai ficar mais fácil de entender:
linear-gradient(135deg, transparent, transparent 14px, rgba(0,0,0,.1) 14px, rgba(0,0,0,.1) 15px, transparent 15px, transparent);O primeiro item 135deg, se refere a direção que o gradiente vai fazer, poderiamos ter usado a expressão to bottom para indicar que ele vai de cima para baixo. Então o primeiro item sempre se refere a direção que vai ser pintada a tela.
O segundo item transparent, indica que vamos começar usando um pincel transparente, então esse é o ponto de partida.
O terceiro item transparent 14px indica que vamos pintar até 14px de transparente, do ponto inicial anterior.
O quarto item rgba(0,0,0,.1) 14px indica que a partir do pixel 14 (14px), vamos utilizar esta nova cor descrita pelo código rgb.
O quinto item rgba(0,0,0,.1) 15px indica que até o pixel 15 (15px) vai ser pintada com a cor descrita em rgb.
O sexto item transparent 15px indica que a partir do pixel 15 (15px) voltamos a utilizar a transparência a partir deste ponto.
E o último item transparent informa que até o final vamos usar a transparencia.
Basicamente é sempre assim, você determina o ponto de inicio e o ponto final. Pode ver que sempre um casa com o outro.
Em relação ao repetição, por padrão o background sempre se repete se ele não encher tudo onde ele tá sendo usado. Quando determinamos o tamanho, dizemos que aquela arte do gradiente vai ter 20px, sendo assim até encher a area onde tá sendo aplicada esse css ele vai se repetir. Existe uma forma de você remover o comportamento padrão que é adicionando o tag:
background-repeat: no-repeatEspero ter ajudado.