Text über ein Bild

Question

Wie lege ich einige Texte in dieses Karussell? Ich muss einige Texte wie etwas über etwas, einen großen Titel und auch das Menü darüber legen. Wie mache ich das? Ich habe hier nach Antworten gesucht, aber keiner von ihnen hat für mich funktioniert, ich habe versucht, eine Anzeige relativ und absolut zu ändern, aber das hat nicht funktioniert.

Es ist wie, wie schreibe ich ein h1 und bewegen Sie es frei über das Bild des Karussells?

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

verwendet

Answer 2

Karussell

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

jetzt können Sie v4.0.0-beta benutzen Sie bitte den Link https://getbootstrap.com/docs/4.0/components/carousel/#slides-only

wie th Versuchen beziehen für das bootstrap 3 (nur ein Beispiel) ist, 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>