Javascript 试图用css在图像上显示链接/文本和颜色_Javascript_Html_Css_User Interface

Javascript 试图用css在图像上显示链接/文本和颜色

javascript html css user-interface

Javascript 试图用css在图像上显示链接/文本和颜色,javascript,html,css,user-interface,Javascript,Html,Css,User Interface,我试图使一个文本链接出现在一个颜色旁边，出现在容器内的图像上。悬停时，彩色背景会出现，但大小不正确，文本不会出现。下面显示了我的代码，其中的图像是通用图像。该容器是具有自适应布局的引导容器 <style> .wrapper { font-family:Verdana; display: flex; } .conte

我试图使一个文本链接出现在一个颜色旁边，出现在容器内的图像上。悬停时，彩色背景会出现，但大小不正确，文本不会出现。下面显示了我的代码，其中的图像是通用图像。该容器是具有自适应布局的引导容器

<style> 
            .wrapper {
                font-family:Verdana;
                display: flex;
            }
    
      
    
            .content {
                position: absolute;
                transform: translate(-50%, -50%);
                color: #bb2859;
                text-transform: uppercase;
                font-family:Verdana;
                font-size: 28px;
            }
    
            .overlay {
                position: absolute;
                margin: 0 auto;
                height: 100%;
                width: 100%;
                opacity: 0;
                transition:  .5s ease;
                background: #123c69;
            }
    
            .wrapper:hover .overlay{
                opacity: 1;
            }
   
        </style>
        <body>
    
            <h1>
                welcome
            </h1>
            <div class="container" style="max-width: 50%; max-height: 50%;">
                <div class="row-fluid align-self-center">
    
                    <div class="col-md-12 mb-5">
                        <div class="wrapper">
                            <a href="/about"><img class="img-fluid" src="images/pic1.jpg" alt="menuopt1"></a>
                            <div class="overlay">
                                <div class="conten">About</div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12 mb-5">
                        <div class="wrapper">
                            <a href="/about"><img class="img-fluid" src="images/pic2.jpg" alt="menuopt1"></a>
                            <div class="overlay">
                                <div class="conten">About</div>
                            </div>
                        </div>
                    </div>
                    </div>
            </div>
        </body>
    </html>


.包装纸{
字体系列：Verdana；
显示器：flex；
}
.内容{
位置：绝对位置；
转换：翻译（-50%，-50%）；
颜色：#bb2859；
文本转换：大写；
字体系列：Verdana；
字号：28px；
}
.覆盖{
位置：绝对位置；
保证金：0自动；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景#123c69；
}
.wrapper:hover.overlay{
不透明度：1；
}
欢迎
关于
关于