html - 图片上的文字

Question

如何将一些文本放入此轮播中？我必须在上面放一些文本，比如一些关于某事的信息、一个大标题和菜单。我怎么做？我在这里寻找了一些答案，但没有一个对我有用，我试图将一些显示更改为相对和绝对但没有用。

就像，我如何写一个 h1 并在旋转木马的图像上自由移动它？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<div class="carousel-menu">
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="../Site sem nome 2/gd1111.jpg" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="../Site sem nome 2/tw11111.jpg" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="../Site sem nome 2/rol111.jpg" alt="Third slide">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

Answer 1

Reference:
https://bootsnipp.com/snippets/featured/bootstrap-carousel-with-text

html
------------
<div class="container">
<div class="row">
<!-- Carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="First slide">
<!-- Static Header -->
<div class="header-text hidden-xs">
<div class="col-md-12 text-center">
<h2>
<span>Welcome to <strong>LOREM IPSUM</strong></span>
</h2>
<br>
<h3>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</h3>
<br>
<div class="">
<a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div>
</div>
</div><!-- /header-text -->
</div>
<div class="item">
<img src="https://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="Second slide">
<!-- Static Header -->
<div class="header-text hidden-xs">
<div class="col-md-12 text-center">
<h2>
<span>Welcome to LOREM IPSUM</span>
</h2>
<br>
<h3>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</h3>
<br>
<div class="">
<a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div>
</div>
</div><!-- /header-text -->
</div>
<div class="item">
<img src="https://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="Third slide">
<!-- Static Header -->
<div class="header-text hidden-xs">
<div class="col-md-12 text-center">
<h2>
<span>Welcome to LOREM IPSUM</span>
</h2>
<br>
<h3>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</h3>
<br>
<div class="">
<a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div>
</div>
</div><!-- /header-text -->
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- /carousel -->
</div>
</div>
------
css
------
.container {
margin-top: 20px;
}

/* Carousel Styles */
.carousel-indicators .active {
background-color: #2980b9;
}

.carousel-inner img {
width: 100%;
max-height: 460px
}

.carousel-control {
width: 0;
}

.carousel-control.left,
.carousel-control.right {
opacity: 1;
filter: alpha(opacity=100);
background-image: none;
background-repeat: no-repeat;
text-shadow: none;
}

.carousel-control.left span {
padding: 15px;
}

.carousel-control.right span {
padding: 15px;
}

.carousel-control .glyphicon-chevron-left, 
.carousel-control .glyphicon-chevron-right, 
.carousel-control .icon-prev, 
.carousel-control .icon-next {
position: absolute;
top: 45%;
z-index: 5;
display: inline-block;
}

.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev {
left: 0;
}

.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next {
right: 0;
}

.carousel-control.left span,
.carousel-control.right span {
background-color: #000;
}

.carousel-control.left span:hover,
.carousel-control.right span:hover {
opacity: .7;
filter: alpha(opacity=70);
}

/* Carousel Header Styles */
.header-text {
position: absolute;
top: 20%;
left: 1.8%;
right: auto;
width: 96.66666666666666%;
color: #fff;
}

.header-text h2 {
font-size: 40px;
}

.header-text h2 span {
background-color: #2980b9;
padding: 10px;
}

.header-text h3 span {
background-color: #000;
padding: 15px;
}

.btn-min-block {
min-width: 170px;
line-height: 26px;
}

.btn-theme {
color: #fff;
background-color: transparent;
border: 2px solid #fff;
margin-right: 15px;
}

.btn-theme:hover {
color: #000;
background-color: #fff;
border-color: #fff;
}