圖片上的文字

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; 
} 

Answer 2

旋轉木馬

A slideshow component for cycling through elements—images or slides of text—like a carousel.

現在你可以使用v4.0.0-beta請參考以下鏈接 https://getbootstrap.com/docs/4.0/components/carousel/#slides-only

嘗試像日是，使用即時通訊的bootstrap 3（只是一個例子）

.full-width { 
 
    width: 100%; 
 
} 
 

 
.carousel-caption { 
 
    position: absolute; 
 
    top: 0; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-box-align: center; 
 
    -moz-box-align: center; 
 
    -ms-flex-align: center; 
 
    -webkit-align-items: center; 
 
    align-items: center; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<div id="carousel-example" class="carousel slide" data-ride="carousel"> 
 
    
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#carousel-example" data-slide-to="0" class="active"></li> 
 
     <li data-target="#carousel-example" data-slide-to="1"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
      <img src="http://placehold.it/300x200" class="full-width" /> 
 
      <div class="carousel-caption"> 
 
       <div class="full-width text-center"> 
 
        <p> 
 
         Some text which is vertically, horizontally centered in image 
 
        </p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="http://placehold.it/300x200" class="full-width" /> 
 
      <div class="carousel-caption"> 
 
       <div class="full-width text-center"> 
 
        Some text which is vertically, horizontally centered in image 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    
 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    
 
</div>