3

¿Cómo puedo subir el texto hacia la parte superior? me lo pone hacia abajo.

Le puedo meter un padding, pero creo que no es la forma correcta de subirlo, además me daría error a la larga, he estado buscando tutoriales y no encuentro la manera, si me podeis ayudar lo agradecería, os paso la pagina web para que veais como el texto esta puesto abajo, también me gustaría ponerle una box con opacidad para que se vea mejor el texto, por que con las imágenes se puede ver mal.

stealand

<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 vh-100 active">
                <img class="d-block w-100" src="https://wallpaperplay.com/walls/full/4/2/2/234831.jpg" alt="First slide">
                <div class="carousel-caption d-none d-md-block">
                    <h1 class="display">Lorem ipsum dolor sit amet.</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, repellendus.</p>
                </div>
            </div>
            <div class="carousel-item vh-100">
                <img class="d-block w-100" src="https://wallpaperplay.com/walls/full/f/8/a/234838.jpg" alt="Second slide">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Lorem ipsum dolor sit amet.</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, repellendus.</p>
                </div>
            </div>
            <div class="carousel-item vh-100">
                <img class="d-block w-100" src="https://wallpaperplay.com/walls/full/1/d/4/234836.jpg" alt="Third slide">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Lorem ipsum dolor sit amet.</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, repellendus.</p>
                </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>
.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

1 respuesta 1

5

Si te fijas en el <div> que contiene el texto, este, además de tener un position: absolute tiene un bottom: 20px. Estas reglas en conjunto provocan que el texto esté a 20px de la parte de abajo del carrusel. Cambiando bottom por top puedes hacer que esté a los píxeles que necesites contando desde la parte de arriba.

Añadiendo la regla background-color: rgba(0, 0, 0, 0.5) a ese mismo <div> puedes ponerle un fondo con opacidad al contenedor del texto.

CSS

.carousel-caption {
    position: absolute; 
    right: 15%;
    top: 125px; /* Cambiar bottom por top y los píxeles que necesites */
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5); /* Añadir para conseguir el fondo con opacidad */
}
1
  • Justo lo que queria, muchas gracias
    – Vance Dyer
    Commented el 11 sept. 2019 a las 9:06

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.