CSS如何在图像底部有文字说明？ [英] CSS How to have a text caption in the bottom of an image?

问题描述

我对css非常陌生，并且正在尝试在图像底部添加文本标题，如下所示： ：//i.stack.imgur.com/ls5Bl.jpgrel =nofollow noreferrer>

我在3个不同的引导列中有3张图片。

  .img-preview {display：block;保证金：0汽车;物体贴合：封面; min-height：300px; max-width：350px;}。img-container {width：100％;身高：自动;填充：0; background-position：center top;}  

< div class = 行 > < div class =col-md-10 col-md-offset-1> < div class =col-md-4 col-sm-6> < img class =img-container img-previewsrc =../ img / Referenzen_Stimmungsbild.jpg> < h3>< span> Maler< / gt&und< br /> Tapezierarbeiten< / span>< / h3> < / DIV> < div class =col-md-4 col-sm-6> < img class =img-container img-previewsrc =../ img / Referenzen_Stimmungsbild.jpg> < / DIV> < div class =col-md-4 col-sm-6> < img class =img-container img-previewsrc =../ img / Referenzen_Stimmungsbild.jpg> < / DIV> < / div>

我尝试了很多可能的解决方案，没有真正的工作。
试过这个例子 https://css-tricks.com/text -blocks-over-image / ，但当我调整窗口大小时，文本标题不再适用。

实现此目的的最佳方法是什么效果？

解决方案

您可以使用 CSS定位。但是你需要改变一下结构。看看下面的代码片段：

.img-holder {min- height：300px; max-width：350px;保证金：0汽车; position：relative;}。img-holder h3 {display：flex; justify-content：center; align-items：center;位置：绝对;背景：rgba（65,55,91,0.8）;白颜色;底部：0;左：0;宽度：80％;身高：30％;保证金：0;填充：10px; text-align：center;}。img-preview {display：block;保证金：0汽车;物体贴合：封面; min-height：300px; max-width：350px;}。img-container {width：100％;身高：自动;填充：0; background-position：center top;}

< div class =row>< div class =col-md-10 col-md-offset-1> < div class =col-md-4 col-sm-6> < div class =img-holder> < img class =img-container img-previewsrc =http://placehold.it/200x200> < h3>< span> Maler< / gt&und< br /> Tapezierarbeiten< / span>< / h3> < / DIV> < / DIV> < div class =col-md-4 col-sm-6> < div class =img-holder> < img class =img-container img-previewsrc =http://placehold.it/200x200> < h3>< span> Maler<> und< / span>< / h3> < / DIV> < / DIV> < / div>

I'm very new to css and I am trying to have a text caption in the bottom of my images, like so:

I have 3 images in 3 different bootstrap columns.

.img-preview {
  display: block;
  margin: 0 auto;
  object-fit: cover;
  min-height: 300px;
  max-width: 350px;
}
.img-container {
  width: 100%;
  height: auto;
  padding: 0;
  background-position: center top;
}

<div class="row">
  <div class="col-md-10 col-md-offset-1">

    <div class="col-md-4 col-sm-6">
      <img class="img-container img-preview" src="../img/Referenzen_Stimmungsbild.jpg">
      <h3><span>Maler<br />und<br />Tapezierarbeiten</span></h3>
    </div>

    <div class="col-md-4 col-sm-6">
      <img class="img-container img-preview" src="../img/Referenzen_Stimmungsbild.jpg">
    </div>


    <div class="col-md-4 col-sm-6">
      <img class="img-container img-preview" src="../img/Referenzen_Stimmungsbild.jpg">
    </div>
  </div>

I tried a lot of possible solutions but nothing really worked. Tried this for example https://css-tricks.com/text-blocks-over-image/ but when I resized my window, the text caption didn't fit anymore.

What is the best way to achieve this effect?

解决方案

You can do it using CSS Positioning. But you need to change the structure a little bit. Have a look at the snippet below:

.img-holder {
  min-height: 300px;
  max-width: 350px;
  margin: 0 auto;
  position: relative;
}

.img-holder h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  background: rgba(65, 55, 91, 0.8);
  color: white;
  bottom: 0;
  left: 0;
  width: 80%;
  height: 30%;
  margin: 0;
  padding: 10px;
  text-align: center;
}

.img-preview {
  display: block;
  margin: 0 auto;
  object-fit: cover;
  min-height: 300px;
  max-width: 350px;
}

.img-container{
  width: 100%;
  height: auto;
  padding: 0;
  background-position: center top;
}

<div class="row">
<div class="col-md-10 col-md-offset-1">

    <div class="col-md-4 col-sm-6"> 
      <div class="img-holder">
            <img class="img-container img-preview" src="http://placehold.it/200x200">
            <h3><span>Maler<br />und<br />Tapezierarbeiten</span></h3>
      </div>
    </div>
  
  <div class="col-md-4 col-sm-6"> 
      <div class="img-holder">
            <img class="img-container img-preview" src="http://placehold.it/200x200">
            <h3><span>Maler<br />und</span></h3>
      </div>
    </div>

  </div>

Hope this helps!

这篇关于CSS如何在图像底部有文字说明？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！