固定标题中的响应透明徽标

Question

我想知道如何在附加图像中实现效果。徽标是一个图像和透明，而顶部导航仍然有背景。

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

我尝试在主div（100％宽度和80px高度）内制作两个div（徽标和链接）。如果徽标宽度为200px，我如何确保正确的划分始终填充视口的其余部分。

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

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

Answer 1

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

.logo{
width:20%;
}

.links{
width:80%;
}

Answer 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;}

Answer 3

所提出的解决方案都没有在不同的决议下运作。

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

谢谢