html - CSS 文本叠加在完整图像上

Question

我在显示应如下所示的叠加文本时卡住了:

我所做的是:

<div class="row">
            <div class="col-md-3 program-cat">
                <img src="<?php echo EF_THEME_BASE_URL; ?>/images/infants.jpg" >
                <div class="program-desc">
                    Short description of Aqua Aerobics comes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere, mi at pharetra tincidunt, odio ante eleifend ante, a aliquam odio urna nec nisl. Duis fermentum congue ultricies. Sed id aliquet augue.
                    <a class="btn button" href="#">Learn to Swim</a>
                    <span>Infants Program</span>
                </div>
            </div>

        </div>

我的CSS:

#program-cats .program-cat {
    width: 460px;
    height: 100%;
    position: relative;
}

#program-cats .program-cat img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

#program-cats .program-cat .program-desc {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate( -50%, -50%);
    color: white;
    text-align: center;
    background-color: rgba(31, 127, 134, 0.5);
    padding: 5px 0;
    border-top: 1px solid #FFFFFF;
}

我无法实现如图所示的布局。

我们将不胜感激。

Answer 1

.program-cat {
    position: relative;
    display: flex;
}

.program-cat img {
    width: 100%;
    height: 100%;
}

.program-cat .program-desc {
    position: absolute;
    margin: 30px;
    width: 400px;
    color: white;
    text-align: left;
    background-color: rgba(31, 127, 134, 0.5);
    padding: 20px;
}

.program-cat .program-desc a {
   display: block;
    margin: 10px 0;
    padding: 10px 20px;
    background: #fff;
    text-align: left;
    width: 150px;
    text-decoration: none;
    text-transform: uppercase;
    color: rgb(31, 127, 134);
}

.program-cat .program-desc .infant_prog {
   text-align: center;
   text-transform: uppercase;
}

<div class="row">
  <div class="col-md-3 program-cat">
    <img src="http://lorempixel.com/400/200/"/>
    <div class="program-desc">
      Short description of Aqua Aerobics comes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere, mi at pharetra tincidunt, odio ante eleifend ante, a aliquam odio urna nec nisl. Duis fermentum congue ultricies. Sed id aliquet augue.
      <a class="btn button" href="#">Learn to Swim</a>
      <div class="infant_prog"> <strong>Infants</strong> Program</div>
    </div>
  </div>
</div>