I see a black background when the Bootstrap carousel goes by image

Question

I see a black background when the Bootstrap carousel goes by image

Navigation

#1 by (0 votes)

0

How do I make it so that I do not see a black background between image and image?

Thank you very much already.

html,
body {
    height: 100%;
}

.carousel,
.item,
.active {
    height: 100%;
}

.carousel-inner {
  height: 100%;
  background: #000;
}

.carousel-caption{padding-bottom:80px;}

h2{font-size: 60px;}
p{padding:10px}

/* Background images are set within the HTML using inline CSS, not here */

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    opacity:0.6;
}

 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="fill" style="background-image:url('img/img1.jpg');"></div>
     
    </div>
    <div class="carousel-item">
      <img class="fill" style="background-image:url('img/img2.jpg');">
      
    </div>
    <div class="carousel-item">
      <div class="fill" style="background-image:url('img/img3.jpg');"></div>
      
    </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>

html css bootstrap imagen carousel

asked by Guillermo Otegui 23.08.2018 в 17:33

source

1 answer

cURL error 56: Recv failure: Connection was reset Complete the for with the payment dates

score 0 · Accepted Answer

Look at this example you just have to put a backgropund:transparent;

html,
body {
    height: 100%;
}

.carousel,
.item,
.active {
    height: 100%;
}

.carousel-inner {
  height: 100%;
  background: transparent;
}

.carousel-caption{padding-bottom:80px;}

h2{font-size: 60px;}
p{padding:10px}

/* Background images are set within the HTML using inline CSS, not here */

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    opacity:0.6;
}

<!DOCTYPE HTML>
<html>
<head>
  <title>Título de la página</title>  
  <meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</head>
<body>

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active fill">
      <img class="d-block w-100" src="http://3.bp.blogspot.com/-YjYKwYIGNjY/UPbJ0LUoGpI/AAAAAAAAAA8/_Y-uILD_q8M/s1600/img_informatica.jpg" alt="First slide">
    </div>
    <div class="carousel-item fill">
      <img class="d-block w-100" src="https://3.bp.blogspot.com/-rnOtrKp8wLQ/WCu_ZircmmI/AAAAAAAAASg/BSbEWXfhYsUcdlSm5_omA9LASTN7Ua1vQCLcB/s1600/curso-gratis-seguridad-informatica.jpg" alt="Second slide">
    </div>
    <div class="carousel-item fill">
      <img class="d-block w-100" src="http://www.fusioninformatica.net/web/media/images/datacenter2.png" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</body>

</html>