Question

一旦我将窗口缩小到某个宽度（=我主屏幕上的<1209px），我的图像转换似乎工作正常，但是当我得到更大的屏幕宽度＆gt; = 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转换以高宽度移动图像

1 个答案: