Home / Questions / 206177
Accepted
Nacho Zve De La Torre
Asked: 2020-10-20 10:19:40 +0800 CST 2020-10-20 10:19:40 +0800 CST

如何使用 CSS 在图像上放置文本？

  • 772

我需要我的图像在上面有一个带有每个描述的文字！我试图触摸 CSS 位置，它在 4 个中的 3 个上工作正常，在第四个图像中一切都崩溃了，我不知道为什么:(

HTML：

<div class="helados container">
    <div class="row">
        <div class="col s12 l4">
            <img th:src="@{/images/chocolate.png}" />
            <a href="#"></a>
        </div>
        <div class="col s12 l4">
            <img th:src="@{/images/crema.png}" />
            <a href="#"></a>
        </div>
        <div class="col s12 l4">
            <img th:src="@{/images/dulceDeLeche.png}" />
            <a href="#"></a>
        </div>
        <div class="col s12 l4">
            <img th:src="@{/images/frutales.png}" />
            <a href="#"></a>
        </div>
    </div>
</div>

CSS：

.helados {
        padding: 0 1.5rem;
    }
.helados img {
        width: 100%;
    }
  .container {
    width: 100%;
}

.helados.container {
    padding: 0;
}

.helados.container .col {
    padding: 0 0.75rem !important;
}

在此处输入图像描述

我想要做的是在每张图片（在它们上方）中出现一个简单的文字，上面写着巧克力、水果树、牛奶焦糖和奶油，这样它对用户来说看起来更漂亮。

谢谢你总:)

css

2 Answers

  1. Best Answer

    这是一个对我有用的例子。

    div, img {
  display: block;
  position: relative;		
  width: 300px;
}

div p {
  background-color: rgba(255,255,255,.8);
  display: block;
  position: absolute;
  bottom: -16px;
  left: 0;
  padding: 5px;
  width: 100%;
}
    <div>
  <img src="https://i.imgur.com/fXCarlD.jpg">
  <p>Texto</p>
</div>

    更多信息。

    • 4

  2. 问候 您必须在容器中创建或保存图像，在这种情况下是 div，此外，描述可以放在跨度、个人标签、div 等......在这种情况下，我使用跨度：

    <div class='img'>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Ice_Cream_dessert_02.jpg/220px-Ice_Cream_dessert_02.jpg'/>
<span>Copa de Chocolate</span>
</div>

    要应用我使用这个 css 代码的样式：

    <style>
div.img{
  display:table;
}
div.img img{
 margin:0;
 padding:0;
}
div.img span{
 line-height:normal;
 font-size:11px;
 display:table-caption;
 margin:0;
 padding:0;
 background:#646464;
 color:white;
 font-style:italic;
 text-align:center;
 position:relative;
 height:0;
}
div.img span span{
 background:rgba(0, 0, 0, 0.4);
 display:block;
 padding:3px;
 text-shadow:0 0 15px white;
}
div.centro{
  margin:0 auto;
}
div.izq{
  float:left;
}
div.der{
  float:right;
}
</style>

    结果：

    结果

    我希望它可以帮助你...

    • 1