2

Buen día compañeros, que pena la molestia. Estoy tratando de hacer lo siguiente. Lo que debo hacer

Ya he hecho varias cosas, solo me hace falta cambiar el background-color, he intentado con nth-child pero no me sirve. Lo único que he hecho es que me aparece el color en todos los elementos y yo quiero elegir un color por cada uno de los elementos.

Esto es lo que tengo hecho pero no es lo que debo hacer

Me podrían ayudar. Este es el código que tengo en HTML con PHP

<section class="historias">
<div>
    <ul class="listado-historias">
        <?php 
            $args = array(
                'post_type' => 'cooperativas',
                'order' => 'ASC',
                'posts_per_page' => 30
            );
            $historias = new WP_Query($args);
            while($historias->have_posts()): $historias->the_post();
        ?>
        <li class="historia">
            <?php the_post_thumbnail(); ?>
            <div class="contenido text-center">
                <h3><?php the_title(); ?></h3>
                <p><?php the_content(); ?></p>

                <a href="<?php the_permalink(); ?>">+ INFORMACIÓN</a>
            </div>
        </li>

        <?php endwhile; wp_reset_postdata(); ?>
    </ul>
</div>

Y en el CSS tengo lo siguiente:

.listado-historias {
    display: flex;
    justify-content: space-between;
}
.listado-historias li {
    flex: 0 0 calc(33.333%);
    position: relative;
}
.historia .contenido{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    color: var(--blanco);
}

Agradecería su ayuda, muchas gracias.

1 respuesta 1

2

Lo del nth-child sí que funciona pero tu lo aplicas al .contenido y de contenido tienes solo uno en cada .historia. La solución es utilizar .historia:nth-child(.. porque de historias tienes varias.

.listado-historias {
    display: flex;
    justify-content: space-between;
    border:solid;
    padding:0;
}
.listado-historias li {
    list-style:none;
    flex: 0 1 30%;
    border:solid;
}
.historia{
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    padding:1em;
}

.historia:nth-child(2){background-color: red;}
.historia:nth-child(3){background-color: skyblue;}

h3{margin-top:0;}
<section class="historias">
<div>
    <ul class="listado-historias">

        <li class="historia">
            <div class="contenido text-center">
                <h3>the_title</h3>
                <p>the_content</p>

                <a href="#">INFORMACIÓN</a>
            </div>
        </li>
        <li class="historia">
            <div class="contenido text-center">
                <h3>the_title</h3>
                <p>the_content</p>

                <a href="#">INFORMACIÓN</a>
            </div>
        </li>
              <li class="historia">
            <div class="contenido text-center">
                <h3>the_title</h3>
                <p>the_content</p>

                <a href="#">INFORMACIÓN</a>
            </div>
        </li>
    </ul>
</div>

Actualización:

El OP comenta:

El problema se basa en que debo colocar esos colores con transparencia por encima de la imagen y la verdad no esta dando

En CSS puedes fácilmente utilizar varias imágenes de fondo de esta manera:

div{width:200px;
    height:200px;
    border:1px solid silver;
    background:linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(https://assets.codepen.io/222579/darwin300.jpg) center/cover;
}
<div></div>

En el ejemplo anterior la primera imagen es la transparencia - un gradiente lineal. A continuación después de una coma aparece la imagen del perro. El orden de apilamiento es al revés. Puedes utilizar algo así en lugar de background-color

2
  • Buen día, muchas gracias por tu respuesta. El problema se basa en que debo colocar esos colores con transparencia por encima de la imagen y la verdad no esta dando. el 3 jun. 2020 a las 15:50
  • He actualizado mi respuesta. Por favor echale una mirada
    – enxaneta
    el 3 jun. 2020 a las 16:12

Tu Respuesta

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

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