Background-position:x y;
The percent positioning is not intuitively visible and needs to be calculated.
Background-position percent Calculation formula:
(Container width-width of background image) *x%=xpx
(Container height-height of background image) *y%=ypx
The pictures we used in the previous section can also continue to do exercises:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Background positioning exercises</title> </Head><Body><stylerel= "stylesheet"type= "Text/css">. Box1,. Box2,. Box3,. Box4,.box5,. box6,. box7,. box8,.box9{float: Left;width:100px;Height:100px;background:#666 URL (18.png) no-repeat;Margin-left:10px;}/*(100px-400px) *x%=-300px; then x=100 (100px-400px) *y%=0; then y=0*/. Box1{background-position:100% 0%}/*(100px-400px) *x%=-200px; then x=66.6666 (100px-400px) *y%=0; then y=0*/. Box2{background-position:66.6666% 0%}/*(100px-400px) *x%=-100px; then x=33.3333 (100px-400px) *y%=0; then y=0*/. Box3{background-position:33.3333% 0%}/*(100px-400px) *x%=0px; then x=0 (100px-400px) *y%=0px; then y=0*/. Box4{background-position:0% 0%}/*(100px-400px) *x%=0px; then x=0 (100px-400px) *y%=-100px; then y=33.3333*/. Box5{background-position:0% 33.3333%}/*(100px-400px) *x%=0px; then x=0 (100px-400px) *y%=-200px; then y=66.66*/. box6{background-position:0% 66.6666%}/*(100px-400px) *x%=0px; then x=0 (100px-400px) *y%=-300px; then y=100*/. box7{background-position:0% 100%}/*(100px-400px) *x%=-300px; then x=100 (100px-400px) *y%=-200px; then y=100*/. Box8{background-position:100% 66.6666%}/*(100px-400px) *x%=-300px; then x=100 (100px-400px) *y%=-300px; then y=100*/. Box9{background-position:100% 100%} </style> <Divclass= "Box1"></Div> <Divclass= "Box2"></Div> <Divclass= "Box3"></Div> <Divclass= "Box4"></Div> <Divclass= "Box5"></Div> <Divclass= "Box6"></Div> <Divclass= "BOX7"></Div> <Divclass= "Box8"></Div> <Divclass= "Box9"></Div></Body></HTML>
Preview Effect:
It is therefore not difficult to draw the equivalent notation of background-position:
Left Top,top left, 0 0 equivalent to 0% 0%
Center Center is equivalent to 50% 50%
Bottom Right,right bottom equivalent to 100% 100%
Center Right,right Center is equivalent to 100% 50%
Bottom center, center bottom equivalent to 50% 100%
Left Center,center left equivalent to 0% 50%
Bottom Left,left bottom equivalent to 0% 100%
......
CSS background image positioning exercise (ii): Percentage of background-position