css - 使用 px 值相对于右下角定位背景

Question

我想将 background-image 放置在距右侧和底部一定距离的位置。
我不想使用 right borrom，因为它会把它放在 Angular 落里，并且 % 或距离 left top 会阻止我的设计响应。
有没有 CSS 解决方案？

Answer 1

是的，您可以使用 calc.

尝试类似的操作

.wrapper {
  background-image: url(http://www.bcebhagalpur.ac.in/images/Facebook.png);
  background-repeat: no-repeat;
  background-position: calc(100% - 40px) calc(100% - 40px);
  height: 300px;
  width: 50%;
  background-color: #DDD;
}

<div class="wrapper">
  <p>Lorem Ipsum Dolor set amet etc etc etc etc .....</p>
</div>

或者你可以只用 4 边定位来完成:

.wrapper {
  background-image: url(http://www.bcebhagalpur.ac.in/images/Facebook.png);
  background-repeat: no-repeat;
  background-position: right 40px bottom 40px;
  height: 300px;
  width: 50%;
  background-color: #DDD;
}

<div class="wrapper">
  <p>Lorem Ipsum Dolor set amet etc etc etc etc .....</p>
</div>