Html 使用css在导航栏链接中插入背景图像

由于某些原因，如果我在css或任何样式中添加边框，图像将不会显示在导航栏中，但不会显示图像。如果我使用

标记在html中显式添加图像，它会出现，但

悬停

将不起作用

CSS

导航{
背景色：#FFFFFF；
高度：35px；
文本对齐：居中；
边框顶部：1px实心#464140；
边框底部：1px实心#464140；
垫面：3件；
}
.img1{
边界半径：4px；
宽度：100%；
身高：100%；
背景图像：url（'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR_a-PcgaUqYBJgn0JywzAQot-30Hl4tyODvxTj4F91pTbWE7fZ'）；
}
.img1：悬停{
边界半径：4px；
背景图像：url（'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTbV-lxtpyrvtdshf5ulyzujoe12f6nqr8gn3hm3tjufzniec'）；
}

HTML

---

这是因为以下标记为空：

<a  href = "index.html" class = "img1" title = "HOME"> </a>

---

添加

显示：块到您的img1类
这是因为以下标记为空：

<a  href = "index.html" class = "img1" title = "HOME"> </a>



添加
显示：块添加到img1类
将
显示：块
添加到
a
标记-默认情况下
a
为
显示：内联
，如果内部没有内容，则变为零
宽度
和零
高度
：


nav{
背景色：#FFFFFF；
高度：35px；
文本对齐：居中；
边框顶部：1px实心#464140；
边框底部：1px实心#464140；
垫面：3件；
}
.img1{
边界半径：4px；
宽度：100%；
身高：100%；
显示：块；
}
.img1：悬停{
边界半径：4px；
背景图像：url（'http://placehold.it/200x200');
}
向
a
标记添加
display:block
-默认情况下
a
为
display:inline
，如果内部没有内容，则变为零
width
和零
height
：


nav{
背景色：#FFFFFF；
高度：35px；
文本对齐：居中；
边框顶部：1px实心#464140；
边框底部：1px实心#464140；
垫面：3件；
}
.img1{
边界半径：4px；
宽度：100%；
身高：100%；
显示：块；
}
.img1：悬停{
边界半径：4px；
背景图像：url（'http://placehold.it/200x200');
}

演示：


对于多个图像菜单：


将
display:block
属性添加到锚定标记。默认情况下，定位标记是内联元素，因此没有宽度和高度


nav{
背景色：#FFFFFF；
高度：35px；
文本对齐：居中；
边框顶部：1px实心#464140；
边框底部：1px实心#464140；
垫面：3件；
}
.img1{
边界半径：4px；
宽度：100%；
身高：100%；
背景图像：url（'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR_a-PcgaUqYBJgn0JywzAQot-30Hl4tyODvxTj4F91pTbWE7fZ'）；
显示：块；
}
.img1：悬停{
边界半径：4px；
背景图像：url（'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTbV-lxtpyrvtdshf5ulyzujoe12f6nqr8gn3hm3tjufzniec'）；
}


演示：


对于多个图像菜单：


将
display:block
属性添加到锚定标记。默认情况下，定位标记是内联元素，因此没有宽度和高度


nav{
背景色：#FFFFFF；
高度：35px；
文本对齐：居中；
边框顶部：1px实心#464140；
边框底部：1px实心#464140；
垫面：3件；
}
.img1{
边界半径：4px；
宽度：100%；
身高：100%；
背景图像：url（'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR_a-PcgaUqYBJgn0JywzAQot-30Hl4tyODvxTj4F91pTbWE7fZ'）；
显示：块；
}
.img1：悬停{
边界半径：4px；
背景图像：url（'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTbV-lxtpyrvtdshf5ulyzujoe12f6nqr8gn3hm3tjufzniec'）；
}


请将您的代码放在小提琴上。您能提供一个JSFiddle.net演示吗？给你。。我不能让一个图像工作，但不能有多个。。我在垂直对齐和保留原始图像大小方面也遇到了问题。请将代码放到小提琴中。您能提供一个JSFIDLE.net演示吗？给你。。我不能让一个图像工作，但不能有多个。。我在垂直对齐和保留原始图像大小方面也有问题。很抱歉，我没有将源添加到在线图像中。就这么做了。。但是我代码中的源代码很好。。他们在其他地方工作，谢谢。。如果我想向导航栏添加更多照片，我不需要使用内联，你能告诉我怎么做吗？将它们放入ul列表，列表样式类型为：无；我不能给你盘子里的溶液。首先请阅读：很抱歉，我没有将源添加到在线图像中。就这么做了。。但是我代码中的源代码很好。。他们在其他地方工作，谢谢。。如果我想向导航栏添加更多照片，我不需要使用内联，你能告诉我怎么做吗？将它们放入ul列表，列表样式类型为：无；我不能给你盘子里的溶液。为初学者阅读以下内容：如果我想向导航栏添加更多照片，我不需要使用内联，你能告诉我怎么做吗？如果我想向导航栏添加更多照片，我不需要使用内联，你能告诉我怎么做吗？谢谢，我可以让一张照片工作，但不能有多张照片。看看我的小提琴。请在这里查看演示。我想这就是你需要的这正是我需要的哈哈。。你能不能给我一些建议，如何在每个图像之间获得相等的间隔1.我没听清你的问题。你说的等间距是什么意思？我想你需要一些利润。现在在那里
<a  href = "index.html" class = "img1" title = "HOME"> </a>