Html 背景位置似乎不准确

我有一个图像，我在上面放了一个面具

遮罩被分成3个相等的部分。每个部分都有与其背景相同的图像。 每个部分有图像的1/3部分。我正在更改每个部分的背景位置，因此遮罩（整体）看起来与图像完全相同

一切都很好，但第二部分在背景图像中有一些问题，它看起来很少向右移动像素

我需要去掉那个移位

HTML:

<div id="wrapper">
    <div id="main">
        <img src="http://images.all-free-download.com/images/graphiclarge/grasshopperpraying_mantis_195444.jpg" />
    </div>
    <div id="mask">
        <div class="part part1"></div>
        <div class="part part2"></div>
        <div class="part part3"></div>
    </div>
</div>
<br>
<button id="switcher" class="main">Put mask on top</button>

img {
    width: 100%;
    height: 100%;
}
#wrapper {
    position: relative;
    width: 390px;
    height: 300px;
}
#main {
    z-index: 2;
}
#mask {
    z-index: 1;
}
#main, #mask, .part {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.part {
    background-image: url('http://images.all-free-download.com/images/graphiclarge/grasshopperpraying_mantis_195444.jpg');
    background-size: 390px 300px;
    width: 130px;
}
.part2 {
    background-position: -130px 0;
    left: 130px;
}
.part3 {
    background-position: -260px 0;
    left: 260px;
}

$('#switcher').click(function () {
    if ($(this).hasClass('main')) {
        $(this).html('Put mask on top').removeClass('main');
        $('#main').css({
            zIndex: 1
        });
        $('#mask').css({
            zIndex: 2
        });
    } else {
        $(this).html('Put main on top').addClass('main')
        $('#main').css({
            zIndex: 2
        });
        $('#mask').css({
            zIndex: 1
        });
    }
});

JS:

<div id="wrapper">
    <div id="main">
        <img src="http://images.all-free-download.com/images/graphiclarge/grasshopperpraying_mantis_195444.jpg" />
    </div>
    <div id="mask">
        <div class="part part1"></div>
        <div class="part part2"></div>
        <div class="part part3"></div>
    </div>
</div>
<br>
<button id="switcher" class="main">Put mask on top</button>

img {
    width: 100%;
    height: 100%;
}
#wrapper {
    position: relative;
    width: 390px;
    height: 300px;
}
#main {
    z-index: 2;
}
#mask {
    z-index: 1;
}
#main, #mask, .part {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.part {
    background-image: url('http://images.all-free-download.com/images/graphiclarge/grasshopperpraying_mantis_195444.jpg');
    background-size: 390px 300px;
    width: 130px;
}
.part2 {
    background-position: -130px 0;
    left: 130px;
}
.part3 {
    background-position: -260px 0;
    left: 260px;
}

$('#switcher').click(function () {
    if ($(this).hasClass('main')) {
        $(this).html('Put mask on top').removeClass('main');
        $('#main').css({
            zIndex: 1
        });
        $('#mask').css({
            zIndex: 2
        });
    } else {
        $(this).html('Put main on top').addClass('main')
        $('#main').css({
            zIndex: 2
        });
        $('#mask').css({
            zIndex: 1
        });
    }
});

---

这是因为您使用的是尺寸为425x318的图像，并将背景大小调整为390x300，所以由于它们的纵横比不匹配，图像会失真

检查更新的演示，这里我使用了和图片大小相同的包装尺寸，即425x318

更新代码：

CSS

从.part中删除背景尺寸并更改#包装宽度和高度

img {
    width: 100%;
    height: 100%;
}
#wrapper {
    position: relative;
    width: 425px;
    height: 318px;
}
#main {
    z-index: 2;
}
#mask {
    z-index: 1;
}
#main, #mask, .part {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.part {
    background-image: url('http://images.all-free-download.com/images/graphiclarge/grasshopperpraying_mantis_195444.jpg');
    /*background-size: 390px 300px;*/
    width: 130px;
}
.part1 {
    background-position: 0 0;
    left: 0;
}
.part2 {
    background-position: -130px 0;
    left: 130px;
}
.part3 {
    background-position: -260px 0;
    left: 260px;
}

更新：

正如您在评论中提到的，图像不在控制范围内，

背景大小

属性

包含

和

封面

也不起作用

唯一可行的选择似乎是通过某种方法（javascript或服务器端代码）获取图像维度，并动态设置#包装器维度以匹配图像维度

JavaScript代码：（用于获取图像维度并相应地设置包装器维度）

供参考：

---

正如达曼所指出的，问题的原因是图像的纵横比。而且，如果不更改

#wrapper

维度或图像本身，就无法修复

我找到了一个解决办法，但是使用了

img

标记，而不是

背景图像

，这样我就可以同等程度地扭曲

掩码div

图像的纵横比，因为它被“真实图像”破坏

$（“#切换器”）。单击（函数（）{
if（$（this）.hasClass（'main'））{
$（this.html（'Put mask on top'）.removeClass（'main'）；
$（'#main'）.css({
zIndex:1
});
$（'#mask'）.css({
zIndex:2
});
}否则{
$（this.html（'Put main on top'）.addClass（'main'））
$（'#main'）.css({
zIndex:2
});
$（'#mask'）.css({
zIndex:1
});
}
});
img{
宽度：100%；
身高：100%；
}
#包装纸{
位置：相对位置；
宽度：390px；
高度：300px；
}
#主要{
z指数：2；
}
#面具{
z指数：1；
}
#主、#遮罩、.部件{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.部分{
宽度：130px；
}
.第二部分img{
左边距：0；
宽度：390px；
高度：300px；
}
.第二部分{
左：130像素；
}
.第二部分img{
左边距：-130px；
}
.第三部分{
左：260px；
}
.第三部分img{
左边距：-260px；
}



将掩码放在css类的顶部。缺少第1部分。这是打字错误吗？这也许不能解决问题，但只是问问而已。我在小提琴中没有发现任何问题。可能是我需要清洁我的眼睛：-）图像大小与其尺寸不匹配，因此调整了大小并扭曲了。裁剪图像的一部分可以吗？遮罩应该看起来与图像完全一样。若裁剪意味着不显示图像的某些部分，那个是不允许的。@Jashwant我不知道你们还在等什么，答案似乎是working@sanojlawrence，是的，解决方案有效，但它要求更改
#包装器的宽度，这在我的情况下是固定的。哈，比我快。这里是另一个JSFIDLE，只是有一个原始390px宽度的源图像：哇……很棒的眼睛。这是图像的失真，而不是像素的偏移。太好了。我当时正在做一件更复杂的事情，这件事花了我将近一天的时间。非常感谢。包装宽度是固定的。我不能改变。任何解决方案，通过更改
背景大小
或任何其他方法？使用与包装器相同的图像维度：）您也可以尝试背景大小：包含。我不控制图像，因此不能使用相同维度的图像<代码>包含
不起作用。