Html 使用css控制覆盖的大小

这是一个简单的html代码和引导旋转木马，其中有三个图像幻灯片，然后添加了一个覆盖，使旋转木马标题更具吸引力！它可以在大屏幕上正常工作，但在小屏幕上，包括手机（智能手机），覆盖层的高度比旋转木马的高度要高！！如何使它们即使在小屏幕上也具有相同的高度

|餐饮服务|
.覆盖{
位置：相对位置；
宽度：100%；
最小高度：100%；
背景色：#080d15；
不透明度：.5；
z指数：1000；
}
.传送带.传送带项目{
高度：500px；
}
.旋转木马项目img{
位置：绝对位置；
对象匹配：覆盖；
排名：0；
左：0；
最大高度：100%；
}
.旋转木马标题{
位置：绝对位置；
右：15%；
最高：50%；
左：15%；
z指数：10；
填充顶部：20px；
垫底：20px；
颜色：#fff；
文本对齐：居中；
z指数：1000
}





把世界带到你的餐桌上
创造终生难忘的记忆
用美味的食物和服务填满每一个场合。

使所有图像的高度与

height:100%;

您也可以使用过滤器CSS属性来过滤图像，而不是覆盖以降低图像亮度

filter: brightness(0.5);

输出将与叠加相同

---

您可以在转盘图像上使用文本覆盖

请检查下面的代码链接好吗？希望它对你有用。您只需给出

高度：100%至
。叠加
和
。旋转木马项目img
而非
最小高度：100%或<代码>最大高度：100%

请参阅此链接：



|餐饮服务|
.覆盖{
位置：相对位置；
宽度：100%；
身高：100%；
背景色：#080d15；
不透明度：.5；
z指数：1000；
}
.传送带.传送带项目{
高度：500px；
}
.旋转木马项目img{
位置：绝对位置；
对象匹配：覆盖；
排名：0；
左：0；
身高：100%；
}
.旋转木马标题{
位置：绝对位置；
右：15%；
最高：50%；
左：15%；
z指数：10；
填充顶部：20px；
垫底：20px；
颜色：#fff；
文本对齐：居中；
z指数：1000
}





把世界带到你的餐桌上
创造终生难忘的记忆
用美味的食物和服务填满每一个场合。
制作img
高度：100%感谢champ@Yudiz_Webdesign您为我节省了时间和精力我们很高兴我们的解决方案帮助了您。。。