Eighteen Blog

灵活的背景定位

背景知识:background-position的扩展语法,background-origin,calc()

background-position扩展语法

  1. background-position扩展语法: css3 中background-position 语法可以通过在偏移量前指定关键字,来设置四条边的偏移量。
    1
    background-positon: right 20px bottom 10px;

background-origin

  1. background-origin: css3 中 background-origin 可以指定背景图片的显示范围,默认以padding-box为准,即padding的外边沿。此时背景图片的位置将和padding一致。通常此方案更适合开发需求。
    1
    2
    3
    padding:20px;
    background-origin: content-box;
    background-position: 100% 100%;

calc()

  1. calc(): 允许填入 任意 + - * / 四则运算组合的表达式。
    1
    background-position: calc(100% - 20px) calc(100% - 10px);

扩展:border-box 边框的外边沿;padding-box 内边距的外边沿; content-box 内容的外边沿。

原效果

在这里插入图片描述

最终效果

在这里插入图片描述

 评论