如何在图片上放置文字？

Question

我有Website

HTML：

＆＃13;

＆＃13;

.lista_sus li {
  display: inline-block;
  position: relative;
  margin: 0 9px 5px 0;
  background-color: #041067;
}
.lista_sus li p {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
}
.hide {
  display: none;
}

＆＃13;

<ul class="lista_sus">

  <li>
    <img src="./wp-content/themes/twentyfourteen/images/1.png" alt="Smiley face" height="250" width="250">

    <p class="hide">
      <div class="title">Zorica L. Codoban
        <br>avocat
        <br>
      </div>

      - Avocat din anul 1997
      <br>- domenii de specialitate: drept civil, drept comercial, drept succesoral, drept imobiliar, dreptul muncii, drept administrativ, dreptul familiei;
      <br>- limbi vorbite: franceza.
    </p>
  </li>

＆＃13;

＆＃13;

＆＃13;

我想在图片上放置文字...我做了一些测试，我们在论坛上找到但没有工作。

我该如何解决这个问题？ 你能帮帮我吗？

提前致谢！

Answer 1

创建HTML background Image

或者更改HTML代码的结构并为此使用float。

Answer 2

  .picture {
    background: url("http://www.wallpaperup.com/uploads/wallpapers/2012/09/07/13037/big_thumb_97f1fdc4221e259ac57c475977627b9d.jpg") no-repeat center center fixed;
    background-size: 100%;
    display:inline-block;
  }

<div class="picture">TEXT HERE</div>

Answer 3

通常你会创建一个与位置相对的div。在它里面你有一个img和一个文本元素，它绝对位于你想要的地方。

Answer 4

Here is a working example

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  ul li {
    display: block;
    background-color: blue;
    color: #fff;
  }
  ul li img {
    width: 500px;
    position: absolute;
    z-index: 10;
  }
  ul li p {
    position: absolute;
    z-index: 100;
    padding: 15px;
  }

<ul>
  <li>
    <img src="http://www.psdgraphics.com/file/colorful-triangles-background.jpg" alt="">
    <p>
      Avocat din anul 1997
      <br>domenii de specialitate: drept civil, drept comercial, drept succesoral, drept imobiliar, dreptul muncii, drept administrativ, dreptul familiei;
      <br>limbi vorbite: franceza.
    </p>
  </li>
</ul>

Answer 5

选项1：使用背景图像

您可以在div的背景中设置图像，并在图像中包含文字：

div {
  display: inline-block;
  height: 300px;
  width: 300px;
  background: url(http://placekitten.com/g/300/300);
}

<div>This is some text</div>

---

选项2：使用定位

您可以使用包装div（position: relative），并相应地定位文本和图像（position: absolute）：

.wrap {
  position: relative;
  height: 300px;
  width: 300px;
}
.text,
.wrap img {
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 300px;
}
.text {
  z-index: 8;
}

<div class="wrap">
  <div class="text">This is some text</div>
  <img src="http://placekitten.com/g/300/300" />
</div>