我想知道如何将 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>
最佳答案
您可以使用如下所示更改 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>
关于javascript - 将背景位置 % 转换为 px,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43440234/