css过渡高移位图像

Question

我的图像过渡似乎很好地工作，一旦我缩小窗口到一定的宽度（= < 1209px在我的主屏幕上），但当我得到更大的屏幕宽度> = 1210px，过渡似乎在过渡期间敲击了周围的图像。

jsfiddle

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它只有一个实例的图像中心。