Question

我的导航栏图像是我在Photoshop中制作的。如何在调整大小期间创建黑色背景并将其显示在左侧的垂直行中？一旦它调整大小，它们就会掉入白色而不会被看到。此外，如果您使用的是Chrome，则必须按左上角的徽标才能将导航图像移出原因..这是唯一可以执行此操作的浏览器。enter link description here

的CSS：

/*---Navigation---*/
nav{
   float: right;
   margin-top: 12px;
   margin-right: 25px;

}
nav a: {
   padding: 15px;
}
#contact{
   padding: 4px;
}
#bio{
   padding: 4px;
}
#photography{
   padding: 4px;
}
#design{
   padding: 4px;
}
#sketches{
   padding: 4px;
}
#web{
   padding: 4px;
}

HTML：

<header>
    <a href="index.html" id="homeLogo" title="home"><img src="images/paintLogo.jpg" alt="Ryan Warner Eyemusic"></a>
   <nav>
    <a href="contact.html" id="contact"><img src="images/links/contact.png" 
       onmouseover="this.src='images/links/contactHover.png'" onmouseout="this.src='images/links/contact.png'"></a>
    <a href="bio.html" id="bio"><img src="images/links/bio.png"
       onmouseover="this.src='images/links/bioHover.png'" onmouseout="this.src='images/links/bio.png'"></a>
    <a href="photography.html" id="photography"><img src="images/links/photography.png"
       onmouseover="this.src='images/links/photographyHover.png'" onmouseout="this.src='images/links/photography.png'"></a>
    <a href="design.html" id="design"><img src="images/links/design.png"
       onmouseover="this.src='images/links/designHover.png'" onmouseout="this.src='images/links/design.png'"></a>
    <a href="sketches.html" id="sketches"><img src="images/links/sketches.png"
       onmouseover="this.src='images/links/sketchesHover.png'" onmouseout="this.src='images/links/sketches.png'"></a>
    <a href="web.html" id="web"><img src="images/links/web.png"
       onmouseover="this.src='images/links/webHover.png'" onmouseout="this.src='images/links/web.png'"></a>
   </nav>
  </header>

Answer 1

将它放在像星巴克页面这样的小按钮上是另一个故事，但我会帮助你解决原始请求。

将徽标设置为float: left;
从header移除身高（禁止扩展）
在overflow: auto;＆amp;上设置header overflow: hidden; nav清除花车。（您也可以使用clearfix方法，但这个方法更容易。）

现在，在调整大小时，您的链接将保持黑色状态。如果你希望它小于480px时成为一个可打开的按钮，你将不得不使用media queries。

注意：

我注意到你设置了mouseover＆amp;您在链接上mouseout切换图片。但是，使用CSS :hover选择器更有效，例如。 nav a:hover { background-image: url(...)
您的图片在加载时会略微闪烁，请考虑使用CSS sprite来避免多次请求。
最后，如果您使用图片进行导航，请注意它对SEO没有好处，并且至少提供链接title属性。

创建响应式图像行

1 个答案: