javascript - 将背景位置 % 转换为 px

Question

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

有时我会使用 background-size: contain 来调整图像的大小。

Jsfiddle:

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

例子:

$(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"))
})

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

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>