将background-position％转换为px

Question

我想知道如何将brackground-position从百分比转换为px。

在某些时候，我使用background-size: contain来调整图像大小。

的jsfiddle：

https://jsfiddle.net/tng3spqb/1/

EX：

＆＃13;

＆＃13;

$(document).ready(function() {
  alert("RED: BACKGROUND CONTAIN: "+$(".box").css("backgroundPositionX")+" - "+$(".box").css("backgroundPositionY")+"\n"+"BLACK - NOT BACKGROUND CONTAIN: "+$(".all").css("backgroundPositionX")+" - "+$(".all").css("backgroundPositionY")+"\n"+"GREEN: BACKGROUND CONTAIN: "+$(".box2").css("backgroundPositionX")+" - "+$(".box2").css("backgroundPositionY")+"\n"+"PINK: NOT BACKGROUND CONTAIN: "+$(".all2").css("backgroundPositionX")+" - "+$(".all2").css("backgroundPositionY"))
})

＆＃13;

.box {
  width: 120px;
  height: 200px;
  background-color: red;
  background-image: url('http://www.guiaturismo.net/blog/wp-content/gallery/fotos-ilha-grande/fotos-ilha-grande-1.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  float:left;
}

.all {
  width: 120px;
  height: 200px;
  background-color: black;
  background-image: url('https://jsfiddle.net/img/logo.png');
  background-repeat: no-repeat;
  background-position: center;
  float:left;
  margin-left:25px;
}

.box2 {
  width: 200px;
  height: 120px;
  background-color: green;
  background-image: url('http://www.guiaturismo.net/blog/wp-content/gallery/fotos-ilha-grande/fotos-ilha-grande-1.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  float:left;
  margin-left:25px;
}

.all2 {
  width: 200px;
  height: 120px;
  background-color: pink;
  background-image: url('https://jsfiddle.net/img/logo.png');
  background-repeat: no-repeat;
  background-position: center;
  float:left;
  margin-left:25px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
</div>
<div class="all">
</div>
<div class="box2">
</div>
<div class="all2">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用下面的内容更改background-position X和Y位置。那是你想要的吗？

$(".box").css({ "background-position-x": "60px" });
$(".box").css({ "background-position-y": "60px" });

更新代码：

$(document).ready(function() {
  //alert("RED: BACKGROUND CONTAIN: "+$(".box").css("backgroundPositionX")+" - "+$(".box").css("backgroundPositionY")+"\n"+"BLACK - NOT BACKGROUND CONTAIN: "+$(".all").css("backgroundPositionX")+" - "+$(".all").css("backgroundPositionY")+"\n"+"GREEN: BACKGROUND CONTAIN: "+$(".box2").css("backgroundPositionX")+" - "+$(".box2").css("backgroundPositionY")+"\n"+"PINK: NOT BACKGROUND CONTAIN: "+$(".all2").css("backgroundPositionX")+" - "+$(".all2").css("backgroundPositionY"))
 

 // how about something like this?
 $(".box").css({ "background-position-x": "60px" });
 $(".box").css({ "background-position-y": "60px" });
 
 alert("RED: BACKGROUND CONTAIN X: "+$(".box").css("backgroundPositionX"));
 alert("RED: BACKGROUND CONTAIN Y: "+$(".box").css("backgroundPositionY"));
})

.box {
  width: 120px;
  height: 200px;
  background-color: red;
  background-image: url('http://www.guiaturismo.net/blog/wp-content/gallery/fotos-ilha-grande/fotos-ilha-grande-1.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  float:left;
}

.all {
  width: 120px;
  height: 200px;
  background-color: black;
  background-image: url('https://jsfiddle.net/img/logo.png');
  background-repeat: no-repeat;
  background-position: center;
  float:left;
  margin-left:25px;
}

.box2 {
  width: 200px;
  height: 120px;
  background-color: green;
  background-image: url('http://www.guiaturismo.net/blog/wp-content/gallery/fotos-ilha-grande/fotos-ilha-grande-1.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  float:left;
  margin-left:25px;
}

.all2 {
  width: 200px;
  height: 120px;
  background-color: pink;
  background-image: url('https://jsfiddle.net/img/logo.png');
  background-repeat: no-repeat;
  background-position: center;
  float:left;
  margin-left:25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
</div>
<div class="all">
</div>
<div class="box2">
</div>
<div class="all2">
</div>