TIP
Because a Picture says more than a Thousand Words.
background-size
/*width,height */
background-size: 100%;
background-size: 100% auto;
background-size: 100% 100%;
/*内置关键字*/
background-size: cover; ⭐
background-size: contain;
background-position
TIP
1️⃣ x-axis
2️⃣ y-axis
background-position: center; ⭐
background-position: left 10% bottom 20%;
linear-gradient
/* 角度，start color */
background-image: linear-gradient(100deg,red,trasparent);
background-image: linear-gradient(100deg,red 70%,blue 80%,rgba(0,0,0,0.5));
radial-gradient
/* shape position，start color */
background-image: radial-gradient(red,blue)
background-image: radial-gradient(circle,red,blue)
background-image: radial-gradient(circle at top,red,blue)
background-image: radial-gradient(circle at top left,red,blue)
background-image: radial-gradient(circle at 20% 50%,red,blue)
background-image: radial-gradient(circle 20px at 20% 50% ,red,blue)
fileter
背景图片设置
background-image: url('./sun-night.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;