我尝试在图像的顶部显示一些版权文本，使用此示例。

什么，我没有看到文字，只有褪色的效果？

<代码><；DIV类="；列表-组-项"；>；<；DIV类="；行"；>；<；DIV类="；COL-12 COL-MD-4垂直-中心-COL<；IMG类="；IMG-thumbnail"；SRC="；media/images/employeeone.JPG"；alt="；"；>；<；/DIV>；<；DIV类="；中间"；>；<；DIV类="；文本"；>；图片版权<；/DIV>；<；/DIV>；<；DIV类="；COL-12 COL-MD-8 MT-2 MT-MD-0<；strong>；EmployeeOne<；/strong>；<；/DIV>；<；/DIV>；<；/DIV>；

这是我的<div class="list-group-item"> <div class="row"> <div class="col-12 col-md-4 vertical-center-col"> <img class="img-thumbnail" src="media/images/EmployeeOne.jpg" alt=""> </div> <div class="middle"> <div class="text">Image Copyright</div> </div> <div class="col-12 col-md-8 mt-2 mt-md-0"> <strong>EmployeeOne</strong> </div> </div> </div> 文件：

css

顺晟科技：

.card-img-top { min-height: 0.1px; } img.img-thumbnail { border: 1px solid #e4c9c9; width: 100%; height: auto; transition: 0.5s ease; backface-visibility: hidden; } .middle { transition: 0.5s ease; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; } .text { background-color: #04aa6d; color: white; font-size: 16px; padding: 16px 32px; } .img-thumbnail:hover { opacity: 0.3; } .img-thumbnail:hover .middle { opacity: 1; } DIV放在与图像相同的容器中，然后使用相邻的同级CSS选择器

.middle

<代码><；DIV类=“ list-group-item ”>；<；DIV类=“ row ”>；<；DIV类=“ col-12 col-MD-4 vertical-center-col ”>；<；IMG CLASS=“ IMG-thumbnail ” SRC=“ https：//www.gardendesign.com/pictures/images/675x529max/site_3/helianthus-yellow-flower-pixabay_11863.jpg ” ALT=“ ”>；<；DIV类=“中间”>；<；DIV类=“文本”>；图像版权<；/DIV>；<；/DIV>；<；/DIV>；<；DIV类=“ col-12 col-MD-8 mt-2 mt-MD-0 ”>；<；strong>；员工姓名<；/strong>；<；/DIV>；<；/DIV>；<；/DIV>；