css揭秘--3灵活的背景定位

向右看齐 2022-12-24 00:49 142阅读 0赞

# 灵活的背景定位 #

### 文章目录 ###

*  灵活的背景定位
 *   *  难题
     *  1. background-position的拓展语法方案
     *  2.background-origin 方案
     *  3. calc()方案

## 难题 ##

在针对容器的某个角对背景图片做偏移定位，很多时候我们只能指定距离左上角的偏移量，或者干脆完全靠齐到其它三个角。而如果希望图片和容器的边角之间能留出一定的空隙(类似于内边距的效果)。要怎么做呢？  
比如下面效果：  
![在这里插入图片描述][20201126091533657.png_pic_center]  
对于固定尺寸的容器来说，可以自己计算出图片距离左上角的偏移量；  
对于不固定的容器来说，只能把background-position设置为某个接近100%的百分比值

下面有更好的解决方案：

## 1. background-position的拓展语法方案 ##

background-position属性已经得到拓展，它允许我们指定背景图片**距离任意角的偏移量**，只要我们在**偏移量前面指定关键字**

比如想要让背景图片跟右边缘保持20px的偏移量，同时跟底边保持10px的偏移量，可以这么写：

background: url(http://csssecrets.io/images/code-pirate.svg)
                            no-repeat bottom right #58a;
    background-position: right 20px bottom 10px;

(在background复合属性里面指定偏移到右下角，是提供一个回退方案，如果浏览器不支持该拓展语法，背景图片会回到默认位置，也就是左上角，这样写就可以在不支持拓展语法的情况下让背景图片偏移到右下角)

## 2.background-origin 方案 ##

在给背景图片设置距离某个角的偏移量时，有一种情况极其常见：偏移量与容器的内边距一致，如果采用上面提到的background-position的拓展语法方案，代码得这么写：

div { 
          margin: 2em 2em;
          max-width: 10em;
          min-height: 5em;
                
          color: white;
          font: 100%/1 sans-serif;
    
          padding: 10px;
          background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat #58a;
          background-position: right 10px bottom 10px;
    }

效果就和第一幅图类似。

但是每次改动内边距的值时，都需要在三个地方更新这个值(内边距和两个偏移量)，下面有一个更简单的方法实现这个需求：让它自动的跟着我们的设定内边距走，不用另外声明偏移量的值。

首先介绍一点：  
当你在写**background-position：top left;** 时，是否疑惑过这个**top left** 到底是哪个左上角，content box(内容区的外沿框)、padding box(内边距的外沿框) 还是border box(边框的外沿框)呢？

(自己画了个图)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center]

默认情况下，background-position是以**padding box**为准的，这样边框才不会遮住背景图片，因此，**top left** 默认指的是**padding box**的左上角。

而我们可以用position-origin属性来改变 默认值是padding box

> MDN：background-origin属性值
> 
>  *  border-box 背景图片的摆放以border区域为参考
>  *  padding-box 背景图片的摆放以padding区域为参考
>  *  content-box 背景图片的摆放以content区域为参考

因此，我们要保证背景图片距离边角的偏移量和内边距保持一致，只需要设置background-origin: content-box;

padding: 10px;
    background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat #58a bottom right;
    background-origin: content-box;

二者效果一致，同时这两种方法也可以一起使用。

## 3. calc()方案 ##

回到刚开始的难题：把背景图片定位到距离底边10px且距离右边20px的位置，**以左上角偏移的思路**来考虑：  
水平偏移量：100% - 20px  
垂直偏移量：100% - 10px

而calc()函数支持这类运算。

padding: 10px;
    background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat #58a;
    background-position: calc(100% - 20px) calc(100% - 10px);

[20201126091533657.png_pic_center]: /images/20221120/1358ea0c2a4b43eeb9c418bbe611a959.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201126100933454.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ==,size_16,color_FFFFFF,t_70#pic_center