html - 背景位置似乎不准确

Question

我有一张图片，我在上面放了一个 mask 。

面具被分成3等份。每个部分都具有与其背景相同的图像。 每个部分有图像的 1/3 部分。我正在改变每个部分的背景位置，因此蒙版(整体)看起来与图像完全一样。

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

我需要删除那个移位。

Demo

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>

CSS:

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;
}

JS:

$('#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
        });
    }
});

Answer 1

这是因为您使用的是尺寸为 425x318 的图像并将背景调整为 390x300，所以图像会变形，因为它们的纵横比不匹配。

检查更新的演示，这里我使用了与图像尺寸相同的包装尺寸，即 425x318。

JS Fiddle Demo

代码更新:

CSS

从 .part 中删除背景大小并更改 #wrapper 宽度、高度。

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;
}

更新:

正如您在评论中提到的，Image 不受控制，background-size 属性 contain 和 cover 也不起作用。

唯一可行的选择似乎是通过某种方法(javascript 或服务器端代码)获取图像尺寸并动态设置#wrapper 尺寸以匹配图像尺寸。

JavaScript 代码:(用于获取图像尺寸并相应地设置 Wrapper 尺寸)

http://jsfiddle.net/8au8nhe5/19/

$(document).ready(function() {
    var myImage = new Image();
    myImage.src = "http://images.all-free-download.com/images/graphiclarge/grasshopperpraying_mantis_195444.jpg";
    $(myImage).on('load', function() {
        console.log('My width is: ', this.naturalWidth);
        console.log('My height is: ', this.naturalHeight);
        $("#wrapper").css({"width": this.naturalWidth + "px", "height": this.naturalHeight + "px"});
    });
});

供引用:
http://davidwalsh.name/get-image-dimensions
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement