Question

我有一张图片，我已经戴上了面具。

面具分为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>

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 width，height。

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

更新：

正如您在评论中提到的，图片无法控制，background-size属性contain和cover也无效。

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

JavaScript代码:(用于获取图片尺寸并相应地设置包装尺寸）

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

Answer 2

正如Dharmang指出的那样，问题的原因是图像的纵横比。并且，如果不更改#wrapper维度或图像本身，则无法修复。

我找到了一种解决方法，但是使用了img代码，而不是background-image，这样我就可以扭曲mask div图像的宽高比，等同于它被“真实形象”摧毁。

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

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 {
    width: 130px;
}

.part img {
    margin-left: 0;
    width: 390px;
    height: 300px;
}

.part2 {
    left: 130px;
}

.part2 img {
    margin-left: -130px; 
}

.part3 {
    left: 260px;
}

.part3 img {
    margin-left: -260px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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"><img src="http://images.all-free-download.com/images/graphiclarge/grasshopperpraying_mantis_195444.jpg" /></div>
        <div class="part part2"><img src="http://images.all-free-download.com/images/graphiclarge/grasshopperpraying_mantis_195444.jpg" /></div>
        <div class="part part3"><img src="http://images.all-free-download.com/images/graphiclarge/grasshopperpraying_mantis_195444.jpg" /></div>
    </div>
</div>
<br>
<button id="switcher" class="main">Put mask on top</button>

背景位置似乎不准确

2 个答案: