イメージ上のテキスト

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

bootstrap 3（ほんの一例）に使用されます

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

このリンクを参照してください。 、IMは

.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>