Css 背景职位百分比不起作用

我读到的每一篇文章都说这应该可以很好地工作，但出于某种原因，它不是

这是为了解决别人的问题，所以解决它对我来说并不重要，我只是想知道为什么。问题出在

.br.bg image

上。我知道我正在尝试使用

calc（）

，但是使用一个简单的

背景位置：50%

也不起作用

html{
身高：100%；
宽度：100%；
}
身体{
边际：0px；
身高：100%；
宽度：100%；
溢出：隐藏；
}
.bg图像{
高度：600px；
宽度：800px；
背景图像：url（'http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-267a.jpg');
背景大小：100%；
背景重复：无重复；
}
.亲戚{
位置：相对位置；
}
.集装箱溢铺{
背景色：rgba（0,0,0,0.6）；
身高：100%；
宽度：100%；
}
.framesizer{
高度：340px；
宽度：300px；
溢出：隐藏；
位置：绝对位置；
}
.框架{
背景图像：url（'http://i.imgur.com/4AcIXsD.png');
背景重复：无重复；
背景大小：100%；
高度：340px；
宽度：300px；
}
.tl{
顶部：30px；
左：30px；
}
.tl.bg图像{
背景位置：右30px底部30px；
}
.br{
顶部：calc（100%-340px-30px）；
/*框架高度加上30px间距*/
左：计算（100%-300px-30px）；
/*框架宽度，加上30px间距*/
}
.br.bg图像{
背景位置：右计算器（800px-300px-30px）底部计算器（600px-340px-30px）；
/*由于某种原因，背景职位不喜欢百分比*/
}

---

格斯平哈说得有点对。此示例的工作原理与您预期的一样：

.br .bg-image {
  background: url('http://media1.santabanta.com/full') 50% 50%;
}

虽然有这个-它不会工作

.br .bg-image {
    background-position:50% 50%;
}

（如果这是右下框的输出）

解决问题 经过一番努力，我找到了问题的根源<代码>背景位置当背景与它包含的帧一样大（或更大）时停止工作。 这也是dognose的解决方案有效的原因。它删除

背景大小

作为证明，我已将

.br

-框架和

.br.bg图像的CSS更改为以下内容：

.br {
    top:calc(100% - 340px - 30px);
    left:calc(100% - 300px - 30px);
}
.br .bg-image {
    background-position: calc(100% + 30px) calc(100% + 30px); 
    /* 100% puts it bottom right, + 30px offset from .br */
    background-position: right -30px bottom -30px;
    /* or simply use this */
    height: 100%;
    width: 100%;
    background-size: 800px 600px;
}

这样，
背景大小
不再等于帧，导致
背景位置
按预期工作

见

为什么
它不适用于百分比的原因是，背景位置取决于背景大小。因为
背景位置：0%0%位于左上方，
背景位置：100%100%位于右下角。如果背景图像和它包含的帧一样大，则0%和100%之间不再有差异

将此理论与
calc（）
结合使用，它所做的只是：

calc（100%-340px-30px）
将其放置在右侧（100%），这根本不会移动它，然后将其总共移动370px（-340px-30px）到左侧

在您的例子中，它会向右移动，因为您在
calc（）
前面加了
right


背景位置
初始值0%0%

参考背景定位区域的大小减去
背景图像；尺寸是指水平偏移和垂直偏移的宽度
到垂直偏移的高度

那么背景图像的大小和元素的大小有什么不同呢
是受欢迎的，这使得背景定位与百分比一起工作。否则他们不会

例子：
考虑大小为
500X500 px
的图像

使用
背景位置：50%50%

如果您的div的宽度为
600px


您的背景图像将向右移动

50%*（600px-500px）
即
50px


类似地，如果
div
的高度为
700px
，则背景图像将下移

50%*（700px-500px）
即
100px


div{
背景图片：url(https://i.imgur.com/gcnJ2Qi.png);
背景重复：无重复；
背景位置：50%50%；
边框：纯灰；
宽度：600px；
高度：700px；
}
我要说清楚，你需要将图像放在右下角的框架上居中？应该发生什么，出了什么问题？@user2182349右下角的框架应该显示它在背景中悬停的图像部分。在上面的代码中，它正在工作，但是当您在
背景位置上用
calc（100%-300px-30px）
替换
calc（800px-300px-30px）
时，它停止工作，即使图像的宽度是800px，我现在知道是什么导致它（+1），但是现在我想知道为什么浏览器的行为是这样的。。。有什么想法吗？在看了更多之后，我想我现在终于明白了。也许你能看看你是否理解我的解释。我已经试着找到一个解决办法好几个小时了。非常感谢。