对于渐变和背景的认知

CSS background 属性 | 菜鸟教程 (runoob.com)

先看这个教程

 

background: rgb(255,241,240);

background: linear-gradient(180deg, rgba(255,241,240,1) 0%, rgba(255,255,255,1) 33%);

 

顺着这个思路 我们这边走下去

background: linear-gradient(180deg, rgba(255, 241, 240, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(22, 241, 240, 1) 34%, rgba(255, 255, 255, 1) 100%);

 

 在顺着下面的思路 我们往下面进行

.main {

    background-color: red;

    background: url('https://img.alicdn.com/imgextra/i1/O1CN01tJzlzI1GsZImWSZZN_!!6000000000678-2-tps-540-363.png') top left/120px repeat-x,

        url('https://img.alicdn.com/imgextra/i1/O1CN01tJzlzI1GsZImWSZZN_!!6000000000678-2-tps-540-363.png') bottom left/120px repeat-x,

        linear-gradient(180deg, rgba(255, 241, 240, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(22, 241, 240, 1) 34%, rgba(255, 255, 255, 1) 100%);

    height: 100vh;

    border: 1px solid #eee;

}

 

 

 

 

 

 

 

background: url('https://img.alicdn.com/imgextra/i1/O1CN01tJzlzI1GsZImWSZZN_!!6000000000678-2-tps-540-363.png')

174px center no-repeat,

linear-gradient(0deg, #177ee6 9%, #2b76d6 79%);

 

两组css样式的话就需要用,隔开

background: url('https://img.alicdn.com/imgextra/i1/O1CN01tJzlzI1GsZImWSZZN_!!6000000000678-2-tps-540-363.png'),

linear-gradient(0deg, #177ee6 9%, #2b76d6 79%);

background-repeat: no-repeat;

background-size: 180px 120px,100% 100%;

background-position: left 31px top 23px,0,0;

太精彩了