导语
今天我来讲《CSS揭秘》当中背景与边框章节的中的第3个效果，灵活的背景定位。
今天我还是用心海的表情包去演示，模拟在大海中，心海在一个潜水艇当中的灵活的定位。
初始化模板
首先我们先初始化一下模板，还是以 01半透明边框 的模板为基础去修改。
<head>
<style>
body {
width: 100vw;
height: 100vh;
background-color: aqua;
display: flex;
align-items: center;
justify-content: center;
}
.xinhai {
width: 300px;
height: 120px;
border: 1px solid #655;
position: relative;
/* 注意：图片的路径记得写自己的 */
background: url('./心海表情包/母体.png') no-repeat;
}
.name {
position: absolute;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<div class="xinhai">
<div class="name">珊瑚宫心海</div>
</div>
</body>
这样我们就可以得到一个心海在潜水艇当中默认位置了，但是她文字挡住了，所以我们通过 background-position 把心海放在右下角。
.xinhai {
width: 300px;
height: 120px;
border: 1px solid #655;
position: relative;
/* 注意：图片的路径记得写自己的 */
background: url('./心海表情包/母体.png') no-repeat bottom right;
}
但是图片定位在右下角和边框直接贴边，通常让人在视觉上感觉不舒服，所以接下来才是重头戏。
background-position 的拓展语法方案
background-position 是允许我们在任意角去控制偏移量的，所以如果我们想设置心海与右边缘保持 20px 的偏移量，与底部保持 10px 的偏移量，那就可以这样做：
.xinhai {
width: 300px;
height: 120px;
border: 1px solid #655;
position: relative;
/* 注意：图片的路径记得写自己的 */
background: url('./心海表情包/母体.png') no-repeat;
background-position: right 20px bottom 10px;
}
这样心海就可以不用与冰冷的潜水艇外壳贴贴了。
background-origin 方案
上述的方案给背景图设置偏移量是非常常见的情况，但是如果说内边距 padding 与偏移量相等的怎么办呢？如果采用上述方案代码也可以是这样的
.xinhai {
width: 300px;
height: 120px;
border: 1px solid #655;
position: relative;
/* 注意：图片的路径记得写自己的 */
background: url('./心海表情包/母体.png') no-repeat;
background-position: right 10px bottom 10px;
padding: 10px;
}
我们看到，确实起效果，但是代码并不简洁，而且一次调整可能要调整三个值，太麻烦了。所幸，我们还能去优化。
在这里，我们需要知道，每个元素都是存在 border-box（边框的外沿框），padding-box（内边距的外沿框），content-box（内容区的外沿框）。而 background-position 是默认以 padding-box 为准的，这样边框就不会遮盖背景图片。
所以我们在这里将 background-position 的边角关键字改为以内容区为基准，并且使用 background-origin 改变背景图片属性的原点位置的背景相对区域。代码如下：
.xinhai {
width: 300px;
height: 120px;
border: 1px solid #655;
position: relative;
/* 注意：图片的路径记得写自己的 */
background: url('./心海表情包/母体.png') no-repeat bottom right;
padding: 10px;
background-origin: content-box;
}
这样的效果是和上一个方案是一样的，而且同时也可以使用 background-position 去控制偏移量，使其更加灵活。
calc() 方案
最后一个方案，也是最简单的方案，利用CSS的 calc()函数，在 background-position 当中去计算偏移量。我们还是设置成最初的偏移量，右偏移20px，底部偏移10px。这样我们可以设置一个 100% - 20px 的水平偏移量，一个 100% - 10px 的垂直偏移量 （注意 - 和 + 的两侧是有空字符的）。代码如下：
.xinhai {
width: 300px;
height: 120px;
border: 1px solid #655;
position: relative;
/* 注意：图片的路径记得写自己的 */
background: url('./心海表情包/母体.png') no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);
}
效果是一致的。
结束
好的，今天就讲这么多，希望大家都能学到点东西。那么我是捞佬，我们下次再见！
