Html 什么是防止悬停文本（居中）出现在图像上，除非指针移动到图像的下半部分？

CSS代码在顶部，HTML在底部。我想我的图像模糊和悬停文字，它正在做，但它只是悬停文字时，我把光标靠近中间的图像和图像的下半部分。当光标位于图像的任意点上时，希望将图像的文本悬停

.imgtext{
颜色：白色；
背景：rgba（0,0,0,0.01）；
背景位置：中心；
字体大小：24px；
字号：900；
最高：40%；
左：0%；
底部：40%；
右：0%；
宽度：100%；
身高：100%；
填充：0px 14px 14px 0px；
不透明度：0；
显示：块；
文本对齐：居中；
位置：绝对位置；
-webkit过渡：所有0.8秒都易于输入输出；
-o型过渡：所有0.8秒均易于输入输出；
转换：所有0.8都易于输入输出；}
图{
位置：相对位置；
溢出：隐藏；
保证金：自动；
显示：块；
宽度：450px；
高度：265x；}
.pic：悬停img{
-webkit过渡：所有0.3轻松输入输出；
-o-过渡：所有0.3秒的缓进-缓出；
过渡：所有0.3秒的缓进缓出；
-webkit过滤器：模糊（4px）；
-moz滤波器：模糊（4px）；
-ms过滤器：模糊（4px）；
-o-滤波器：模糊（4px）；
过滤器：模糊（4px）；
变换：比例（1.08）；}
.imgtext:悬停{
-webkit不透明度：80；
不透明度：30；}
.contain{对象匹配：contain；}

。



















合作是关键

这就是你要找的吗？我删除并更正了一些CSS，删除了一些

内部的

。还更正了

position:relative

和

position:absolute

和

opacity

的值介于[0,1]之间的用法

您需要检查带有“供应商前缀”的属性的使用情况，因为不再需要某些属性

片段

.pic{
位置：相对位置；
溢出：隐藏；
保证金：自动；
显示：块；
宽度：450px；
高度：265x；
填充：14px 0；/*以便您可以看到模糊的图像顶部/底部*/
}
.pic img{
display:block；/*删除下面的一些默认间距*/
}
.pic.contain{object-fit:contain}
.pic：悬停img{
-webkit过渡：所有0.3轻松输入输出；
-o-过渡：所有0.3秒的缓进-缓出；
过渡：所有0.3秒的缓进缓出；
-webkit过滤器：模糊（4px）；
-moz滤波器：模糊（4px）；
-ms过滤器：模糊（4px）；
-o-滤波器：模糊（4px）；
过滤器：模糊（4px）；
转换：比例（1.08）；
}
.pic:hover.imgtext{
-webkit不透明度：0.8；
不透明度：0.8；
-webkit过渡：所有0.8秒都易于输入输出；
-o型过渡：所有0.8秒均易于输入输出；
过渡：所有0.8秒都易于输入输出；
}
.imgtext{
边距：0；/*这是一个，因此请删除默认边距*/
显示：块；
宽度：100%；
位置：绝对；/*在父对象中居中*/
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字体大小：24px；
字号：900；
文本对齐：居中；
不透明度：0；
颜色：白色；
背景色：rgba（0,0,0,0.01）；
}
[outline=“1”]*{outline:1px虚线}

合作是关键

嗨，安德鲁，欢迎来到SO！首先：将此内容添加到CSS

[outline=“1”]*{outline:1px虚线}

，将正文更改为

，然后刷新页面。现在，您可以准确地看到元素的位置了。在仔细查看代码之后，一些友好的建议是：按照与HTML相同的顺序构造CSS（尽可能相关）。另外，绑定相关规则并始终使用相同的定义顺序。这将在以后尝试查找错误或简单地维护代码时节省大量时间。这就是我重新整理CSS的原因。