0
my site에 대해 만든 스크롤의 헤더가 작아 지려고합니다. 꽤 잘 작동하지만, CSS에 전환이 포함되어 있음에도 불구하고, 작은 헤더가 큰쪽으로 (위로 스크롤 할 때) 변환 될 때만 헤더의 이미지가 부드럽게 전환됩니다. 그것은 일종의 급격한/글리치가 보인다.CSS 백그라운드 전환으로 인한 응답 헤드
다음은 이미지에 대한 내 CSS의 :
로고 :
.Logo.small:hover {
background: url("images/Logo.png") no-repeat;
background-size: contain;
position: absolute;
top: 8px;
width: 40px;
height: 40px;
z-index: 73;
-webkit-transition: background-image .5s;
-webkit-transition: height 0.6s;
-moz-transition: height 0.6s;
transition: height 0.6s;
-webkit-transition: width 0.6s;
-moz-transition: width 0.6s;
transition: width 0.6s;
}
.Logo:hover {
background: url("images/LogoHover.png") no-repeat;
background-size: contain;
position: absolute;
top: 8px;
width: 81px;
height: 85px;
z-index: 70;
-webkit-transition: background-image .5s;
}
.Logo {
background: url("images/Logo.png") no-repeat;
background-size: contain;
position: absolute;
top: 8px;
width: 81px;
height: 85px;
z-index: 73;
-webkit-transition: background-image .5s;
-webkit-transition: width .5s;
-webkit-transition: height .5s;
}
.Logo.small {
background: url("images/Logo.png") no-repeat;
background-size: contain;
position: absolute;
top: 8px;
width: 40px;
height: 40px;
z-index: 73;
-webkit-transition: background-image .5s;
-webkit-transition: width .5s;
-webkit-transition: height .5s;
}
사회 아이콘 1 :
.Icon_BG1 {
background: url("images/IconBG.png") no-repeat;
background-size: contain;
position: absolute;
margin-left: 905px;
top: 26px;
width: 45px;
height: 48px;
z-index: 80;
-webkit-transition: background-image .5s;
-webkit-transition: width .5s;
-webkit-transition: height .5s;
}
.Icon_BG1.small {
background: url("images/IconBG.png") no-repeat;
position: absolute;
margin-left: 905px;
top: 10px;
background-size: contain;
width: 35px;
height: 35px;
z-index: 80;
-webkit-transition: background-image .5s;
-webkit-transition: width .5s;
-webkit-transition: height .5s;
}
.Icon_BG1.small:hover {
background: url("images/IconBGHover.png") no-repeat;
position: absolute;
margin-left: 905px;
top: 10px;
background-size: contain;
width: 35px;
height: 35px;
z-index: 80;
-webkit-transition: background-image .5s;
}
.Icon_BG1:hover {
background: url("images/IconBGHover.png") no-repeat;
position: absolute;
margin-left:905px;
top: 26px;
width: 45px;
height: 48px;
z-index: 80;
-webkit-transition: background-image .5s;
}
사회 아이콘 2 :
.Icon_BG_2 {
background: url("images/IconBG2.png") no-repeat;
background-size: contain;
position: absolute;
margin-left: 960px;
top: 26px;
width: 45px;
height: 48px;
z-index: 82;
-webkit-transition: background-image .5s;
-webkit-transition: width .5s;
-webkit-transition: height .5s;
}
.Icon_BG_2.small {
background: url("images/IconBG2.png") no-repeat;
background-size: contain;
position: absolute;
margin-left: 960px;
top: 10px;
width: 35px;
height: 35px;
z-index: 82;
-webkit-transition: background-image .5s;
-webkit-transition: width .5s;
-webkit-transition: height .5s;
}
.Icon_BG_2.small:hover {
background: url("images/IconBGHover2.png") no-repeat;
background-size: contain;
position: absolute;
margin-left: 960px;
top: 10px;
width: 35px;
height: 35px;
z-index: 82;
-webkit-transition: background-image .5s;
}
.Icon_BG_2:hover {
background: url("images/IconBGHover2.png") no-repeat;
position: absolute;
margin-left:960x;
top: 26px;
width: 45px;
height: 48px;
z-index: 82;
-webkit-transition: background-image .5s;
}