Home > Developer > Web Develop
Prepare a Sprite chart first, like this
There are 3 ways to locate the background image, the two commonly used for
Keywords: background-position:top left; (top/bottom/cennter/left/right) Pixels: background-position: Move px horizontally to move px vertically;
Keywords:
Where the keyword method background-position:top left and left top effect is the same. (note: When setting only one value: represents the horizontal position, the vertical position is centered by default)
About the positive or negative of the pixel value: the negative direction is left/top, and the positive direction is right/bottom
The origin of their background positioning is in the upper left corner, if you can understand the following code, the above two methods have been qualified
<!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;}. Box1{background-position:-300px 0;}. Box2{background-position:-200px 0;}. Box3{background-position:-100px 0;}. Box4{background-position:Top Left;}. Box5{background-position:0-100px;}. box6{background-position:0-200px;}. box7{background-position:Bottom Left;}. Box8{background-position:-300px-200px;}. Box9{background-position:Bottom Right;} </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>
The preview effect is:
Note that: In the repeat state and the default state (the default is repeat), background-position is not working!
In the next section we go on to the third method of positioning:
Percentage: background-position:0% 0%;
Related articles:
How to make Sprite diagram: Photoshop: Making sprite collage Pictures
CSS background image positioning exercise (i)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
