1

Estoy tratando de poner un bloque con sombra en la parte inferior de un POST de un BLOG, pero solo he conseguido esto:

sombra arriba

.content-area .format-gallery .post-thumbnail:before,
.content-area .format-image .post-thumbnail:before {
background: #000;
content: "";
display: block;
height: 75%;
left: 0;
opacity: 0.4;
top: 0;
width: 100%;
z-index: -1

}

este es el código que llevo, lo que necesito es que quede ubicado en la parte inferior... (algo como gravity bottom en xml)

3
  • Tienes bottom:0 pero necesitas también poner position:absolute y que el elemento sobre el que quieres que se posicione tenga tambien algún valor en position que no sea static
    – user7176
    el 8 nov. 2016 a las 14:23
  • puse position:absolute, y ya no se ve... ademas cambie top por bottom y tambien puse ambos y nada
    – Maguz
    el 8 nov. 2016 a las 14:27
  • como bien dicen @blonfu, el contenedor padre debe tener una posición, en este caso diría que relative, y en tu código poner posición absolute con bottom: 0;
    – Zander
    el 8 nov. 2016 a las 14:32

1 respuesta 1

1

Tienes que poner el elemento en posición absoluta y luego darle un ancho también (yo he puesto left:0 y right:0 que viene a ser parecido a width:100%), sino no se verá. El elemento padre, en este caso .fondo tiene que tener posición también para que sirva de referencia:

.fondo{
 background:url("http://lorempixel.com/output/abstract-h-c-200-500-4.jpg");
  background-size:cover;
  width:200px;
  height:500px;
  color:white;
  position:relative;
 }

.fondo:before{
  content:"";
  display:block;
  height:75%;
  background:#000;
  bottom:0;
  position:absolute;
  opacity: 0.4;
  left:0;
  right:0;
}
<div class="fondo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus placeat alias aut sed, nihil ducimus sit. Saepe dolorum incidunt eligendi, accusamus repudiandae, harum a ipsam, hic fugiat quam quisquam et.</div>

1
  • gracias, lo implemente en mi caso y anduvo bien :)
    – Maguz
    el 8 nov. 2016 a las 14:36

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.