我读到的每个地方都说这应该可以正常工作,但由于某种原因,它不是.
这是为了修复别人的问题所以修复它对我来说无关紧要,我只是想知道为什么.问题出在.br .bg-image上.我知道我正在尝试使用calc()但使用简单的背景位置：50％也不起作用.
http://jsfiddle.net/uLaa9fnu/2/
html {
height: 100%;
width: 100%;
}
body {
margin: 0px;
height: 100%;
width: 100%;
overflow: hidden;
}
.bg-image {
height: 600px;
width: 800px;
background-image: url('http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-267a.jpg');
background-size: 100%;
background-repeat: no-repeat;
}
.relative {
position: relative;
}
.containeroverlay {
background-color: rgba(0,0.6);
height: 100%;
width: 100%;
}
.framesizer {
height: 340px;
width: 300px;
overflow: hidden;
position: absolute;
}
.frame {
background-image: url('http://i.imgur.com/4AcIXsD.png');
background-repeat: no-repeat;
background-size: 100%;
height: 340px;
width: 300px;
}
.tl {
top: 30px;
left: 30px;
}
.tl .bg-image {
background-position: right 30px bottom 30px;
}
.br {
top: calc(100% - 340px - 30px);
/* Height of frame,plus 30px spacing */
left: calc(100% - 300px - 30px);
/* Width of frame,plus 30px spacing */
}
.br .bg-image {
background-position: right calc(800px - 300px - 30px) bottom calc(600px - 340px - 30px);
/* Background Position doesn't like percentages for some reason */
}
<div class="bg-image">
<div class="containeroverlay relative">
<div class="framesizer tl">
<div class="bg-image">
<div class="frame"></div>
</div>
</div>
<div class="framesizer br">
<div class="bg-image">
<div class="frame"></div>
</div>
</div>
</div>
</div>
解决方法
解决问题
经过一番摆弄后,我发现了造成这个问题的原因.当背景与其包含的帧一样大(或更大)时,background-position停止工作.
这也是dognose解决方案有效的原因.它删除了背景大小.
作为证据,我已将.br-frame和.br .bg-image的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;
}
这样,背景大小不再等于帧,导致背景位置按预期工作.
为什么呢
它不适用于百分比的原因是因为背景位置取决于背景大小.因为background-position：0％0％;是左上角,背景位置：100％100％;在右下方.如果背景图像与包含框架一样大,则0％和100％之间没有更多差异.
将此理论与calc()结合使用,它所做的只是：
calc(100％ – 340px – 30px)将其置于右侧(100％),根本不移动它,然后向左移动总共370px(-340px – 30px).
在你的情况下,它向右移动,因为你在calc()之前加上了前缀.
