Javascript 如何在带有文本的图像上方创建一个透明的深色覆盖层？

我想创建一个透明的黑色图像覆盖上面的图像与文字。在悬停时有一个很好的过渡

.study1{
背景图像：url（“http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
高度：300px；
宽度：400px；
}
.头衔{
保证金：0自动；
宽度：60%；
显示：块；
字号：1.25em；
颜色：#ccc；
文本对齐：居中；
填充顶部：120px；
}

.study1{
背景图像：url（“http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
高度：300px；
宽度：400px；
位置：相对位置；
z指数：1；
}
.研究1：之后{
内容：“；
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.5）；
z指数：-1；
}
.头衔{
保证金：0自动；
宽度：60%；
显示：块；
字号：1.25em；
颜色：#ccc；
文本对齐：居中；
填充顶部：120px；
}
.透明深色{
背景：rgba（0,0,0,0.5）；
身高：100%；
}

---

见下文。使用

：在

伪代码之后，背景设置为不透明度0。悬停时，不透明度将更改为0.3，持续时间为1秒

.study1{
背景图像：url（“http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
高度：300px；
宽度：400px；
位置：相对位置；
}
.研究1：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0）；
过渡：背景1秒轻松；
}
.研究1：悬停：之后{
背景：rgba（0,0,0,0.3）；
}
.头衔{
保证金：0自动；
宽度：60%；
显示：块；
字号：1.25em；
颜色：#ccc；
文本对齐：居中；
填充顶部：120px；
}

使用此代码

.study1{
背景图像：url（“http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
高度：300px；
宽度：400px；
位置：相对位置；
z指数：1；
}
.研究1：之后{
内容：“；
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.5）；
z指数：-1；
-webkit变换：缩放（0）；
变换：比例（0）；
-webkit转换：0.5s；
过渡：0.5s
}
.研究1：悬停：之后{
-webkit转换：规模（1）；
变换：比例（1）；
}
.头衔{
保证金：0自动；
宽度：60%；
显示：块；
字号：1.25em；
颜色：#ccc；
文本对齐：居中；
填充顶部：120px；
}

---

使用js fiddle中提到的类

.wrapper

设置透明暗图像覆盖，设置位置：相对于

.study1

并相应地定位其他元素

---

是js小提琴。

这可能符合您的目的

.image{
位置：相对位置；
宽度：200px；
高度：200px；
}
.图像img{
宽度：100%；
垂直对齐：顶部；
}
.图片：之后{
内容：attr（数据内容）；
颜色：#fff；
位置：绝对位置；
宽度：100%；高度：100%；
顶部：0；左侧：0；
背景：rgba（0,0,0,0.6）；
不透明度：0；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
}
。图片：悬停：之后{
不透明度：1；
}

.study1{
背景图像：url（“http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
高度：300px；
宽度：400px；
位置：相对位置；
}
.行动{
位置：绝对位置；
底部：0；
左：0；
右：0；
背景色：rgba（0,0,0,0.4）；
溢出：隐藏；
宽度：100%；
身高：0；
过渡：放松；
}
.研究1：悬停。行动{
身高：100%；
}
.头衔{
空白：nowrap；
颜色：白色；
字体大小：20px；
位置：绝对位置；
溢出：隐藏；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}

.container{
显示器：flex；
位置：相对位置；
边框：1px实心：#ddd；
宽度：300px；
高度：300px；
}
.覆盖{
位置：绝对位置；
左：0；
填充：20px；
右：0；
排名：0；
底部：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景色：rgba（127，127，127，0.6）；
过渡：所有0.3秒缓解；
}
.内容{
宽度：300px；
高度：300px；
背景图像：url（'http://mays.tamu.edu/citycentre/wp-content/uploads/sites/44/2015/07/pmbaclass.jpg');
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
}
.文本{
字体大小：25px；
文本转换：大写；
颜色：#fff；
显示：内联flex；
证明内容：中心；
文本对齐：居中；
过渡：所有0.8秒缓解；
}
.overlay:hover.text{
变换：比例（1.2,1.2）；
}

世界上最优秀的开发者

您应该更具描述性。哪个HTML元素应该获得

.transparent dark

类？他需要添加新的标记吗？你能给我们一个工作的例子吗，因为问题的作者甚至为你提供了一个StackSnippet？我想这可能会有助于你阅读这篇文章