背景图像位置（从底部和右侧）

Question

我需要像这样的背景定位： 从右侧50px，从底部60px 。如果我将背景位置放在右下角，它会向右下方移动。

这是html和css。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我无法解决它，尽管我一直在尝试和搜索。谢谢:)）

Answer 1

您可以使用calc(100% - 50px)（完整width - 50px）和calc(100% - 60px)（完整height - 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>

Answer 2

试试这个：

background-position: right 50px bottom 60px;

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

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

Answer 3

更改背景位置

background-position: right 50px bottom 60px;