CSS - 值和单位应用（灵活的背景定位）

最新推荐文章于 2024-04-19 09:39:59 发布

耳东蜗牛

最新推荐文章于 2024-04-19 09:39:59 发布

阅读量623

点赞数

本文链接：https://blog.csdn.net/It_rod/article/details/80491810

版权

CSS 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

我们先以例子引出当前的问题：

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style>
            div {
                background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat bottom right #00BCD4;
                
                /* Styling */
                padding: 10px 0px 0px 10px;
                color: white;
                font: 100%/1 "Comic Sans MS";

                width: 30em;
                height: 15em;
                font-size: 15px;
            }
        </style>
    </head>  
    <body>  
        <div>Code Pirate</div>
    </body>  
</html>

问题

当前我们可以看到背景中即指定了颜色，也制定了一个svg图像，并且通过设置background-position: bottom right设置图片到右下侧靠边。但是我们需要将这个图片仍然放置在右下角，但是与右下角存在一定的偏移量。

解决方案：background-position (css 2.1)

使用CSS 2.1 来做到这一点是可能的，但很麻烦：可以基于它自身的尺寸以及我们期望它距离右下角的偏移量，计
算出背景图片距离左上角的偏移量，然后再把计算结果设置给backgroundposition。当容器元素的尺寸不固定时（因为内容往往是可变的），这就不可能做到了。网页开发者通常只能把background-position 设置为某个接近100% 的百分比值，以便近似地得到想要的效果。

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style>
            div {
                background: url(http://csssecrets.io/images/code-pirate.svg)
                            no-repeat #00BCD4;
                background-position: 95% 80%;
                
                /* Styling */
                padding: 10px 0px 0px 10px;
                color: white;
                font: 100%/1 "Comic Sans MS";

                width: 30em;
                height: 15em;
                font-size: 15px;
            }
        </style>
    </head>  
    <body>  
        <div>Code Pirate</div>
    </body>  
</html>

现在我们通过设置百分比来设置background-position，但是现在这个值是通过我自己的测试，是通过代码调试而来的，相对而言挺麻烦的。

解决方案：background-position (css 3)

CSS3允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字。举例来说，如果想让背景图片跟右边缘保持20px 的偏移量，同时跟底边保持10px 的偏移量。可以操作如下：

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style>
            div {
                background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat #00BCD4;

                background-position: 95% 90%;
                background-position: right 20px bottom 15px;
                
                /* Styling */
                padding: 10px 0px 0px 10px;
                color: white;
                font: 100%/1 "Comic Sans MS";

                width: 30em;
                height: 15em;
                font-size: 15px;
            }
        </style>
    </head>  
    <body>  
        <div>Code Pirate</div>
    </body>  
</html>

上面代码中使用两个background-position，因为对于第二种background-position的用法在IE9以前不能使用，所以加上解决方案1的代码解决兼容性问题。注意：svg在IE9以前也不支持。

延伸：background-origin (IE9以前不能使用)

之前我们在使用background-position: top left; 的时候还有一个问题没有考虑，那就是top left 到底是哪个左上角？每个元素身上都存在三个矩形框：border box（边框的外沿框）、padding box（内边距的外沿框）和content box（内容区的外沿框）。那background-position 这个属性指定的到底是哪个矩形框的左上角？

默认情况下，background-position 是以padding box 为准的，这样边框才不会遮住背景图片。因此，top left 默认指的是padding box 的左上角。CSS3我们得到了一个新的属性background-origin，可以用它来改变这种行为。在默认情况下，它的值是（闭着眼睛也猜得到）padding-box。如果把它的值改成content-box（参见下面的代码），我们在background-position 属性中使用的边角关键字将会以内容区的边缘作为基准。

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style>
            div {
                background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat bottom right #00BCD4;

                background-position: 95% 90%;
                background-position: right 0px bottom 0px;
                background-origin: content-box;
                
                /* Styling */
                padding: 10px 0px 0px 10px;
                color: white;
                font: 100%/1 "Comic Sans MS";

                width: 30em;
                height: 15em;
                font-size: 15px;
            }
        </style>
    </head>  
    <body>  
        <div>Code Pirate</div>
    </body>  
</html>

如图可以看到当前的background-position的坐标为content-box。

延伸：calc() 方案 (IE9以前不能使用)

我们可以不借用解决方案：background-position (css 3)的情况下，达到自定以具体的偏移量。那就是使用calc() 函数，允许我们执行此类运算，它可以完美地在background-position 属性中使用：

用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

background-position: 95% 90%;
background-position: calc(100% - 20px) calc(100% - 10px);

兼容性：

IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
6.0-8.0	2.0-3.6	4.0-18.0	3.1-5.1	15.0+	3.2-5.1	2.1-4.3	18.0
9.0+	4.0-15.0 ^-moz-	19.0-25.0 ^-webkit-	6.0 ^-webkit-		6.0-6.1 ^-webkit-	4.4-4.4.4	19.0-25.0 ^-webkit-
9.0+	16.0+	26.0+	6.1+		7.0+	4.4-4.4.4	26.0+