Html 如何修复图像上的透明菜单？

我正试图修复代码中的一些问题，但不知何故，情况似乎变得更糟了

它应该像这个例子。这四个箱子需要挨着坐。所有六张图片必须排成三行。为此，我使用了divclass列。在这些图片上，动物的名字应该写上（透明的）。 为此，我使用了Pad。现在，名称显示在背景图像上，而不是下的单个图像

body，html{
身高：100%；
保证金：0；
}
.bg{
/*使用的图像*/
背景图片：url（“images/mandarinfish.jpg”）；
/*全高*/
身高：50%；
/*将图像居中并精确缩放*/
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
字体系列：“Playfair显示”，衬线；
}
/*博文斯特兰德酒店*/
标题{
背景色：#D3；
填充：10px；
文本对齐：居中；
字体大小：35px；
颜色：白色；
边界半径：0px；
}
#等级{
高度：200px；
背景颜色：灰色；
背景图像：线性梯度（灰色、白色、灰色）；
}
保险商实验室{
边际：0px；
填充：0px；
列表样式：无；
}
ulli{
浮动：左；
宽度：200px；
高度：40px；
背景色：透明；
不透明度：.8；
线高：40px；
文本对齐：居中；
字体大小：20px；
}
ullia{
文字装饰：无；
颜色：黑色；
显示：块；
}
悬停{
背景色：gainsboro；
}
/*正导航条*/
位置：相对位置；
}    
纳瓦尔先生{
浮动：左；
显示器：flex；
颜色：#000000；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
/*菜单*/
.集装箱{
宽度：100%；
高度：90px；
保证金：0自动；
背景色：rgba（255255,0.5）；
}
navbar先生
{
背景色：透明
}
/*blok分类*/
.box2{
显示：内联块；
边框：2件纯黑；
填充：30px；
边界半径：25px；
文本对齐：居中；
边缘：1米；
宽度：500；
身高：100；
}
/*foto尺寸*/
{
框大小：边框框；
}
img{
高度：300px；
宽度：200px；
自我校准：灵活启动；
}
.行{
显示器：flex；
}
/*相邻的三根相等的柱子*/
.栏目{
弹性：33.33%；
填充物：5px；
}
/*奥德斯特酒店*/
.image{
位置：相对位置；
宽度：100%；
文本对齐：居中；
颜色：透明；
}
.居中{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
img{
边框：2倍实心#000000；
}
页脚{
位置：绝对位置；
文本对齐：居中；
底部：0；
宽度：100%；
}
/*平板电脑景观*/
@媒体屏幕和屏幕（最小宽度：320px）{
#主{宽度：67%；}
#次要{宽度：30%；左边距：3%；}
}
/*桌面肖像*/
@媒体屏幕和屏幕（最大宽度：768px）{
#主{宽度：100%；}
#次要{宽度：100%；边距：0；边框：无；}
}

迪仁

阿姆菲比和尤姆
沃格斯
维森
Zoogdieren

基克
Amfibie和eumln分类

博绥
福格尔分类

暹罗凯姆维斯
维森分类

伊克霍恩
动物分类

小丑维斯
艾帝拉尔
寡头
基克
波夫
衬垫
Deze pagina是gemaakt voor opdracht 4 van HTML5&；CSS。

选中此项，删除一些css代码以获得更好的查看效果，对于文本，您也可以添加文本阴影

变化：

添加显示：flex；到bg类和.topnav{align self:flex end；宽度：100%；背景：rgb（255255255）；背景：线性梯度（90度，rgba（255255255,1）0%，rgba（255255255,0.6839869736957283）35%，rgba（255255,0.594351193539917）100%）

你应该把topnav div放在bg div里面

body，html{
身高：100%；
保证金：0；
}
.bg{
/*使用的图像*/
背景图像：url（“https://natgeo.imgix.net/subjects/headers/Animal-Tigers.jpg?auto=compress，格式&w=1920&h=960&fit=crop”）；
/*全高*/
身高：50%；
/*将图像居中并精确缩放*/
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
字体系列：“Playfair显示”，衬线；
z指数：100；
显示器：flex；
}
/*博文斯特兰德酒店*/
标题{
背景色：#D3；
填充：10px；
文本对齐：居中；
字体大小：35px；
颜色：白色；
边界半径：0px；
}
#等级{
高度：200px；
背景颜色：灰色；
背景图像：线性梯度（灰色、白色、灰色）；
}
保险商实验室{
边际：0px；
填充：0px；
列表样式：无；
}
ulli{
浮动：左；
宽度：200px；
高度：40px；
背景色：透明；
不透明度：.8；
线高：40px；
文本对齐：居中；
字体大小：20px；
}
ullia{
文字装饰：无；
颜色：黑色；
显示：块；
}
悬停{
背景色：gainsboro；
}
/*正导航条*/
位置：相对位置；
}    
纳瓦尔先生{
浮动：左；
显示器：flex；
颜色：#000000；
te