Flexible background positioning
Background: Extended syntax for background-position, background-origin, calc()
1. Background-position extension syntax
- Background-position extension syntax:Css3 background-position syntax can set the offset of four edges by specifying a keyword before the offset.
background-positon: right 20px bottom 10px; Copy the code
2. background-origin
- Background – origin:In CSS3, background-origin can specify the display range of the background image. By default, the padding-box is used, that is, the outer edge of the padding. The position of the background image will be the same as the padding. Often this scenario is better suited to development requirements.
padding:20px; background-origin: content-box; background-position: 100% 100%; Copy the code
3. calc()
- Calc () :Allow to fill in any
+ - * /An expression for a combination of four operations.background-position: calc(100% - 20px) calc(100% - 10px); Copy the code
Extension: border of the border-box border; Padding-box The outer edge of the inner margin; Content-box The outer edge of the content.
The effect of
The final result
