我正在尝试让标题在为 my site 制作的滚动条上变小.它工作得很好,但尽管 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;
}
最佳答案
这是因为您正在使用 background-size
来调整图像大小而不是 transform
使用
transform: scale(xx);
调整大小
关于jquery - 响应式 header 中 CSS 背景转换的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23024529/