Question

我只想以这种方式在我的图像中添加我的h2文本和小段落。

当我添加h1和文本时，它位于图像下方。

这是因为糟糕的CSS定位吗？

这是我的代码

<div className="committeeBackground">
                  <img src="/images/conference.jpg" alt=""/>
                  <h1>Who</h1>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                  </p>
                </div>

.committeeBackground{
img{
  width: 100%;
 }
}

Answer 1

执行此操作的常见做法是使用css <div>将所有内容包装在position:relative;中，然后将文本元素设为css position:absolute;以将其置于图像之上。然后，您可以使用top:0;或top:30%;等不同属性来删除文本。如果要将所有文本保持在一起，您甚至可以将所有不同的文本元素包装在<div>中，并将<div>赋予样式position:absolute;并能够将所有文本一起移动

这有意义吗？

Answer 2

这就是我要做的事情：

我将图像设置为div的背景。然后我只担心内部元素。

.backgroundImage {
  background: url('http://placehold.it/300?text=%20');
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block {
  display:block;
  text-align: center;
}

<div class="backgroundImage">
  <div class="block">
    <h2>Test Text</h2>
    <p><i>Dummy Text Under H2</i></p>
  </div>
</div>

Answer 3

您可以将图片放在 background-image

<div className="committeeBackground">
              <img src="/images/conference.jpg" alt=""/>
              <h1>Who</h1>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
              </p>
            </div>
.committeeBackground{
   background-image: url("/images/conference.jpg");
}

或者使用css＆gt; 位置：绝对; 指向您的孩子，位置：相对指向您的容器div＆＃34; committeeBackground＆＃34;

    <div className="committeeBackground">
              <img src="/images/conference.jpg" alt=""/>
              <h1>Who</h1>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
              </p>
            </div>
.committeeBackground{
    position: relative;
}
.committeeBackground > * {
    position: absolute;
    left: 50%;
    top: 50%
}

Answer 4

这样做，使用flex将其居中，然后使用position: absolute

＆＃13;

.wrapper {
  position: relative;
  display: inline-block;
}
.ontop {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ontop > div {
  text-align: center;
  color: white;
  font-size: 24px;
}

＆＃13;

<div class="wrapper">
  <img src="http://lorempixel.com/400/300/animals/6" alt="">
  <div class="ontop">
    <div>
      <h2>Test Text</h2>
      <p><i>Dummy Text Under H2</i></p>
    </div>
  </div>
</div>

＆＃13;

图像里面的文字

4 个答案: