Question

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

这是为了解决别人的问题，所以修复它对我来说并不重要，我只想知道原因。问题出在.br .bg-image上。我知道我尝试使用calc()，但使用简单的background-position: 50%也无法使用。

＆＃13;

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 */
}

＆＃13;

<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>

＆＃13;

Answer 1

解决问题

经过一番摆弄后，我发现了造成这个问题的原因。当背景与其包含的帧一样大（或更大）时，background-position停止工作。这也是为什么dognose的解决方案有效。它会删除background-size。

作为证据，我已将.br - 框架和.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）。

在您的情况下，它会向右移动，因为您在right之前加上calc()作为前缀。

Answer 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>

300X400 px

如果div比图像窄
现在你的div元素是(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>

background-position

如果div和image的大小相同：
您在background-size:80% or 120%;指定的任何百分比都将乘以零。并且图像将始终与div的左上角对齐。要解决此问题，请重置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>

/*View Data UI code*/
        try 
        {
            br = new BufferedReader(new FileReader(csvFile));
             while ((line = br.readLine()) != null) 
            {
                 while ((line = br.readLine()) != null)
                {
                // use comma as separator
                  String cellValue[] = line.split(",");
                  String data[][]={{cellValue[1],cellValue[2],cellValue[3],cellValue[4],cellValue[5],cellValue[6],cellValue[7],cellValue[8]}
                  };  
                  String column[]={"Date","Shop","Item","Category","Quantity","Units","Amount","Payment"};
                  System.out.println(data);
                  JTable jt = new JTable(data,column);
                  jt.setPreferredScrollableViewportSize(jt.getPreferredSize());
                 // jt.setFillsViewportHeight(true);
                  sp=new JScrollPane(jt);
                }
            }

        } 
        catch (FileNotFoundException e) 
        {
            e.printStackTrace();
        } 
        catch (IOException e) 
        {
            e.printStackTrace();
        } 
        finally 
        {
            if (br != null) 
            {
                try 
                {
                    br.close();
                } 
                catch (IOException e) 
                {
                    e.printStackTrace();
                }
            }
        }
        /*End of Data UI Code*/

The docs

Answer 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/（如果这是您右下方框架的输出输出）

背景位置百分比不起作用

3 个答案:

解决问题

原因

`background-position`

实施例