固定页眉中的响应式透明徽标答案

【问题标题】：Responsive Transparent Logo in Fixed Header固定页眉中的响应式透明徽标
【发布时间】：2014-01-08 14:17:05
【问题描述】：

我想知道如何实现附图中的效果。徽标是图像且透明，而顶部导航仍有背景。

因此，如果用户向下滚动，徽标会根据其背后的图像或颜色“改变”。

我尝试在主 div（100% 宽度和 80px 高度）内制作两个 div（徽标和链接）。如果 logo 是 200px 宽，我如何确保正确的分割总是填满视口的其余部分。

.mainnav{widht:100%;position:fixed;height:80px;}
.logo {background:url(logo.png);float:left;}
.links{width:???;background:#272727;float:right;}

感谢任何帮助并查看替代方法。

【问题讨论】：

标签： html css

【解决方案1】：

以百分比形式给出徽标和链接的宽度，以使徽标容器具有响应性。

.logo{
width:20%;
}

.links{
width:80%;
}

【讨论】：

【解决方案2】：

试试这个代码：

CSS：

.mainnav{widht:100%;position:fixed;height:80px;}
.logo {background:url(logo.png);float:left;width:20%;background-repeat:no-repeat:backg‌round-size:100% 100%;}
.links{width:80%;background:#272727;float:right;}

【讨论】：

您如何确保 1) 徽标不会拉伸 2) 由于徽标是不重复的背景图像，因此其余部分将一无所有并显示为空白。 3) 如果 20% 小于 200px，则背景图像标志将被裁剪。如果我错了，请纠正我
.logo {background:url(logo.png);float:left;width:20%;background-repeat:no-repeat:background-size:100% 100%;} 试试这个。 .

【解决方案3】：

所提出的解决方案均不适用于不同的分辨率。

最好的解决方案可能是将 2000px 图像作为标题并溢出：隐藏。

谢谢

【讨论】：