Question

有没有办法从百分比右侧显示background image？以像素为单位，这些值运行良好，但不是百分比！ JSfiddle

HTML：<div></div>

的CSS：

div {
  position: absolute; top: 0; left: 0; bottom: 0; right: 0;
  background-image: url('http://www.pngall.com/wp-content/uploads/2016/07/Arrow-PNG-Pic.png');
  background-size: auto 90%;
  background-position: right 20% center;
  background-repeat: no-repeat;
}

Answer 1

你的背景太大了。它超过100％。这会给你带来不可预测的结果！在这里，您可以看到png较小的代码，按预期工作！

div {
  position: absolute; top: 0; left: 0; bottom: 0; right: 0;
  background-image: url('http://www.pngall.com/wp-content/uploads/2016/07/Arrow-PNG-Pic.png');
  background-size: auto 10%;
  background-position: right 10% center;
  background-repeat: no-repeat;
}

https://jsfiddle.net/zn2ujy4b/

Answer 2

我想你可能有错误。你在说：

background-position: right 20% center;

应为X% Y%：

div {
  position: absolute; top: 0; left: 0; bottom: 0; right: 0;
  background-image: url('http://www.pngall.com/wp-content/uploads/2016/07/Arrow-PNG-Pic.png');
  background-size: auto 20%;
  background-position: 90% 50% ;
  background-repeat: no-repeat;
}

JSFiddle

背景位置从右到百分比

2 个答案: