css 转换以高宽度移动图像

Question

一旦我将 window 缩小到一定宽度（=<1209px 在我的主屏幕上），我的图像转换似乎工作正常，但是当我获得更大的屏幕宽度 >=1210px 时，转换似乎在过渡期间敲打图像。

CSS:

.storeBkg {
    width:100%;
    padding:110px 0px 110px 0px;
}
.storeWrapper {
    width:94%;
    max-width:1120px;
    margin:0px auto;
}
.storeHeading {
    width:98%;
    margin-left:1%;
    margin-right:1%;
    border-top:2px solid #FFFFFF;
    border-bottom:2px solid #FFFFFF;
    padding:30px 0px 30px 0px;
    text-align:center;
    font-size:40px;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:60px;
    color:#b0bea7;
    font-weight:300;
}
.storeLeft {
    width:48%;
    background-color:#ffffff;
    float:left;
    margin-left:1%;
    margin-right:1%;
    margin-bottom:25px;
}
.space1 {
    display:block;
    width:100%;
    clear:both;
}
.store {
    width:80%;
    background-position:center center;
    text-align:center;
    padding:30px 10% 30px 10%;
    background-size:530px 295px;
    background-image:url(http://placehold.it/700x400/777);
    -webkit-transition: background-image .5s;
    transition: background-image .5s;
}
.storePadding {
    padding:20px;
    font-size:13px;
    line-height:19px;
}
.store img {
    width:100%;
}
.store:hover {
    cursor:pointer;
    width:80%;
    background-position:center center;
    text-align:center;
    padding:30px 10% 30px 10%;
    background-size:530px 295px;
    background-image:url(http://placehold.it/700x400/000);
    -webkit-transition: background-image .5s;
    transition: background-image .5s;
}

HTML:

<div class="storeBkg">
    <div class="storeWrapper">
        <div class="storeHeading">Test <span class="andFont">&amp;</span> Blah</div>
        <div class="storeLeft">
            <div class="store"><img src="<!--imageholder-->" /></div>
            <div class="storePadding">Lorem ipsum dolor sit amet, in sit etiam aperiri constituto, eu exerci nostrud vix. Mel eu diam urbanitas conclusionemque. Qui cu nemore voluptatibus, eruditi volutpat dignissim mei no.</div>
        </div>
        <div class="storeLeft">
            <div class="store"></div>
            <div class="storePadding">Lorem ipsum dolor sit amet, in sit etiam aperiri constituto, eu exerci nostrud vix. Mel eu diam urbanitas conclusionemque. Qui cu nemore voluptatibus, eruditi volutpat dignissim mei no.</div>
        </div>
    </div>
</div>

Answer 1

http://jsfiddle.net/7c547cbv/

background-repeat: no-repeat; 是修复

如果没有上述属性，在更高的屏幕尺寸下，CSS 会重复您的背景图像，试图将两个实例背靠背居中。通过放置 no-repeat 它只会使图像的一个实例居中。

css 转换以高宽度移动图像

css transition shifts image at high width

html

css

transition