Question

Stack Overflow社区，

尝试设置一个磁贴系统，该系统将导致视频示例，当前由占位符图像填充。尝试将文本放在图像上方。这是我目前的问题：

HTML

<section id="video-section" class="portfolio">
    <div class="big-container">
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1 text-center">
                <h2>Video Production</h2>
                <hr class="small">
            </div>
            <div class="container-fluid full-width has-inner"> 
                <div class="row no-gutter">
                    <div class="col-md-4 nogut">
                        <div id="image1" class="video-item">
                            <a href="https://vimeo.com/208403633">
                                <img id="portfolio1" class="img-full-width" src="img/image1.jpg">
                            </a>
                            <p class="text"> Image 1 </p>
                        </div>
                    </div>
                    <div class="col-md-4 nogut">
                        <div id="image2" class="video-item">
                            <a href="#">
                                <img class="img-full-width" src="img/image2.jpg">
                            </a>
                            <p class="text"> Image 2 </p>
                        </div>
                    </div>
                    <div class="col-md-4 nogut">
                        <div id="image3" class="video-item">
                            <a href="#">
                                <img class="img-full-width" src="img/image3.jpg">
                            </a>
                            <p class="text"> Image 3 </p>
                        </div>
                    </div>
                </div> 
                <div class="row no-gutter">
                    <div class="col-md-4">
                        <div id="image4" class="video-item">
                            <a href="#">
                                <img class="img-full-width" src="img/image4.jpg">
                            </a>
                            <p class="text"> Image 4 </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div id="image5" class="video-item">
                            <a href="#">
                                <img class="img-full-width" src="img/image5.jpg">
                            </a>
                            <p class="text"> Image 5 </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div id ="image6" class="video-item">
                            <a href="#">
                                <img class="img-full-width" src="img/image6.jpg">
                            </a>
                            <p class="text"> Image 6 </p>
                        </div>
                    </div>

                </div>
                <!-- /.row (nested) -->
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->
</section>

CSS

  #video-section {
  padding: 0px;
  background: #353030;
  color: white;
}
.big-container {
  padding: 0px;
}

.containter-fluid .full-width {
  padding-left: 0px;
  padding-right: 0px;
}

.no-gutter > [class*='col-'] {
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 0px;
}


.img-full-width {
  width: 100.5%;
  height: auto;
}

.video-item {
  padding: 0px;
}

 .text {
  position: absolute;
  z-index: 100; 
}

对我做错了什么的任何想法？任何帮助都会很棒，谢谢。

Answer 1

好吧，如果您只想将文字放在图片上，只需将文字类CSS更改为

即可

.text{ 
      position: relative;
      bottom: 100px;
      z-index: 100;}

Here是一篇很棒的文章，解释了如何在图像上放置文本块。

同样here是@xbonez的一个例子。

Answer 2

要将.text个项目放在.video-item容器中，他们不仅需要position: absolute（你做过），而且他们的*容器/父*需要{ {1}}。

在你的情况下，这将是类position: relative的DIV，因此您应该将.video-item添加到position: relative。然后，您应该通过将.video-item和top设置添加到left来调整文字位置。

文字没有定位在正确的图像上

2 个答案: