css过渡高移位图像
问题描述:
我的图像过渡似乎很好地工作,一旦我缩小窗口到一定的宽度(= < 1209px在我的主屏幕上),但当我得到更大的屏幕宽度> = 1210px,过渡似乎在过渡期间敲击了周围的图像。css过渡高移位图像
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">&</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>
答
background-repeat: no-repeat;
是修复
没有上述属性,在更高的屏幕尺寸下,CSS会重复背景图像,试图将两个实例背靠背居中。通过把no-repeat
它只有一个实例的图像中心。
辉煌。谢谢! – 2015-03-30 20:34:36