Quiero lograr el efecto de card y background. Donde el background quede aproximadamente a mitad de la card. Ejemplo:
El código HTML que tengo hasta el momento es este
<section class="seccion2">
<div class="container pt-5">
<div class="col-lg-12">
<div class="card mb-3" style="max-width: 540px; ">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="col-md-4">
<img src="..." class="img-fluid rounded-start" alt="...">
</div>
</div>
</div>
<div class="text-center">
<p>Este es un titulo corto muestral</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime pariatur earum, nesciunt veniam velit doloremque repudiandae, voluptatum culpa dolorum corporis a illum molestiae eos ducimus mollitia. Soluta qui mollitia odio!</p>
<div class="row">
<div class="col-lg-4">
<p>Titulo simple</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo eius corrupti repudiandae rem maiores accusamus ut quod quibusdam earum officia rerum vitae incidunt aspernatur, pariatur dolorem sed quam minus.</p>
</div>
<div class="col-lg-4">
<p>Titulo simple</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo eius corrupti repudiandae rem maiores accusamus ut quod quibusdam earum officia rerum vitae incidunt aspernatur, pariatur dolorem sed quam minus.</p>
</div> <div class="col-lg-4">
<p>Titulo simple</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo eius corrupti repudiandae rem maiores accusamus ut quod quibusdam earum officia rerum vitae incidunt aspernatur, pariatur dolorem sed quam minus.</p>
</div>
</div>
</div>
</div>
</div>
</section>
No tengo problemas con la estructura de la card ni con el contenido. El problema es que no consigo lograr el efecto. El CSS con el que he intentado resolverlo
.seccion2{
background: linear-gradient(180deg,transparent 50%, rgb(10, 10, 10) 50%);
}
Podría incluir cualquier lenguaje que me pueda dar como resultado este efecto, siempre y cuando pueda aplicarlo en un sitio creado en php. Gracias