背景位置百分比不起作用[重复]

Posted 2023-05-08

【中文标题】背景位置百分比不起作用[重复]

【英文标题】：background-position percentage not working [duplicate]

【发布时间】：2015-09-26 08:02:42

【问题描述】：

我读到的每一个地方都说这应该可以正常工作，但由于某种原因它不是。

这是为了解决别人的问题，所以解决它对我来说并不重要，我只是想知道为什么。问题出在.br .bg-image。我知道我正在尝试使用calc()，但使用简单的background-position: 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, 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>

【问题讨论】：

我说清楚了，您需要将图像放在右下角的框架中心吗？

应该发生什么，有什么问题？

@user2182349 右下角的框架应该显示它在背景中悬停的图像部分。在上面的代码中它可以工作，但是当您在background-position 上将calc(800px - 300px - 30px) 替换为calc(100% - 300px - 30px) 时它会停止工作，即使图像的宽度是 800 像素

【参考方案1】：

解决问题

经过一番摆弄，我找到了导致问题的原因。当背景与其包含的框架一样大（或更大）时，background-position 停止工作。 这也是为什么 dognose 的解决方案有效的原因。它删除了background-size。

作为证据，我已将 .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-size 不再等于帧，导致background-position 按预期工作。

见fiddle

为什么

它不适用于百分比的原因是因为background-position 依赖于background-size，从字面上看。因为background-position: 0% 0%; 在左上角，background-position: 100% 100%; 在右下角。如果背景图像与包含的帧一样大，则 0% 和 100% 之间没有更多区别。

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

calc(100% - 340px - 30px) 将其放在右侧（100%），它根本不移动它，然后将其向左移动总共 370px（-340px - 30px）。

在您的情况下，它向右，因为您在 calc() 之前添加了 right 前缀。

【讨论】：

我现在明白是什么原因造成的（+1），但现在我想知道为什么浏览器设置为这样......有什么想法吗？

再看几遍后，我想我现在终于明白了。也许你可以看看你是否理解我的解释。

我已经尝试寻找解决方案好几个小时了。谢谢

【参考方案2】：

background-position

Initial value 0% 0%

指背景定位区域的大小减去大小 背景图像; size 是指水平偏移的宽度和 到垂直偏移的高度

所以背景图片大小和元素大小的任何差异 是受欢迎的，这使得背景定位与百分比一起工作。否则他们不会。

示例：

考虑一个大小为500X500 px的图像； 使用background-position: 50% 50%; 如果您的 div 的宽度为 600px; 您的背景图像将向右移动 50% * (600px - 500px) 即 50px 同样，如果div 的高度为700px，您的背景图像将向下移动50% * (700px - 500px) 即100px

div
    background-image: url(https://i.imgur.com/gcnJ2Qi.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border: solid grey;
    width: 600px;
    height:700px;

<div></div>

如果 div 比图片窄 现在你的 div 元素是 300X400 px，并且你想将你的背景图像定位为与之前相同 (50px right and 100px down) 您需要指定一个否定的background-position: -25% -100%; 因为-25% * (300-500) = 50px 和-100% (400-500) = 100px

div
    background-image: url(https://i.imgur.com/gcnJ2Qi.png);
    background-repeat: no-repeat;
    background-position: -25% -100%;
    border: solid grey;
    width: 300px;
    height:400px;

<div></div>

在 div 和 image 大小相同的情况下： 您在background-position 指定的任何百分比都将乘以零。 并且图像将始终与 div 的左上角对齐。通过重置 background-size:80% or 120%; 来解决这个问题，使图像变小或变大

div
    background-image: url(https://i.imgur.com/gcnJ2Qi.png);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    border: solid grey;
    width: 500px;
    height:500px;
    background-size:80%;

<div></div>

The docs

【参考方案3】：

GEspinha 有点正确。这个例子如你所料：

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

虽然有这个 - 它不会工作。

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

http://jsfiddle.net/gtj5p0px/（如果这是您对右下框架的加速输出）