將background-position％轉換爲px

Question

我想知道如何將brackground-position從百分比轉換爲px。

在某些情況下，我使用background-size: contain來調整圖像大小。

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