0

Como hago para que no se me vea un fondo negro entre imagen e imagen?

Desde ya muchas gracias.

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>

1
  • Mira Cómo preguntar <-ACA para que tu pregunta sea mejor recibida. Tambien, aprovecha y haz el recorrido de bienvenida <-ACA para entender mejor como funcionamos y de paso obtener tu primera medalla! Podrias agregar una imagen de como se ve y como queres que se vea?
    – gbianchi
    Commented el 23 ago. 2018 a las 15:36

1 respuesta 1

0

mira este ejemplo solo tendrias que ponerle un 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>

11
  • Probé con eso y ahora se queda un fondo blanco. Creo que no es ese el problema Commented el 23 ago. 2018 a las 16:22
  • copia y pega este mismo codigo, reemplasalo por el tuyo
    – andy gibbs
    Commented el 23 ago. 2018 a las 16:24
  • Si ahí funciona, pero me cambia todo el responsive y ya no esta con el height 100% Commented el 23 ago. 2018 a las 16:36
  • a que te refieres ?
    – andy gibbs
    Commented el 23 ago. 2018 a las 16:38
  • Lo que tu me pasaste es practicamente el carousel de bootsrtrap sin modificaciones por ejemplo en el responsive, las imagenes no se ven a pantalla completa (en el original mio si se ven). Commented el 23 ago. 2018 a las 16:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.