html - 背景图像位置(从底部和右侧)

Question

我需要这样的背景定位:距右侧 50 像素，距底部 60 像素。如果我将背景位置放在右下角，它会移动到最右和最底部。

这是 html 和 css。

.box {
  background-image: url(http://www.iconbeast.com/images/iconbeast-pro.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  height: 300px;
  width: 80%;
  border: 1px solid #AAA;
}

<div class="box">
  <p>
    This is a box. :) :)
  </p>
</div>

虽然我一直在尝试和到处寻找，但我无法解决它。谢谢:)

Answer 1

您可以使用 calc(100% - 50px)(全 width - 50px)和 calc(100% - 60px )(完整的高度 - 60px)。

.box {
  background-image: url(http://www.iconbeast.com/images/iconbeast-pro.png);
  background-repeat: no-repeat;
  background-position: calc(100% - 50px) calc(100% - 60px);
  height: 300px;
  width: 80%;
  border: 1px solid #AAA;
}

<div class="box">
  <p>
    This is a box. :) :)
  </p>
</div>