将背景位置百分比转换为px

Question

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

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

的jsfiddle：

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

EX：

 $(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>