有时候我们在项目中需要实现图片上带着文字，如下图所示

image.png

在有关vue的bootstrap中框架中就有这样的介绍，在card部分

<div>
  <b-card overlay
          img-src="https://picsum.photos/900/250/?image=36"
          img-alt="Card Image"
          text-variant="white"
          title="Image Overlay"
          sub-title="Subtitle">
    <p class="card-text">
      Some quick example text to build on the card and make
      up the bulk of the card's content.
    </p>
  </b-card>
</div>

下面是原链接，可以点进去学习

https://bootstrap-vue.js.org/docs/components/card