Question

0

333

Vistas

Texto en una imagen con efecto viñeta CSS

Estoy tratando de crear un banner de página que es una imagen con texto encima. Hay dos cosas por las que estoy enfrentando problemas con dos cosas.

Necesito un efecto de viñeta suave en estas imágenes para que el texto sea claramente visible. He intentado lo siguiente, pero no estoy contento con el resultado final. Me gustaría obtener algo como se muestra en la siguiente imagen que muestra una especie de transición suave.
El texto se esconde debajo del efecto de viñeta. Intenté usar z-index pero no funciona.

 body { margin: 0px; } #page-banner img { width: 100%; object-fit: cover; height: 48vh; } #page-banner .vignette:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; -webkit-box-shadow: inset 20em 5em 15em black; -moz-box-shadow: inset 20em 5em 15em black; box-shadow: inset 20em 5em 15em black; z-index: 0; } #page-banner .text { width: 50%; right: 50%; z-index: 1; } #page-banner .text-over-image { position: relative; } #page-banner .text-over-image p { font-size: 60px; color: white; margin: 0; position: absolute; top: 50%; left: 15%; right: 45%; transform: translate(-10%, -50%); }

 <section id="page-banner"> <div class="text-over-image vignette"> <img src="https://wallpaperaccess.com/full/5117570.jpg"> <div class="text"> <p>I am trying to learn adding vignette to images</p> </div> </div> </section>

almost 4 years ago · Santiago Trujillo

3 Respuestas

Responde la pregunta

0

En tu ejemplo, usaste:

 #page-banner .vignette::after

pero podrías usar:

 #page-banner .vignette::before

en cambio.

Eso colocaría el pseudo-element debajo del contenido de .vignette , en lugar de sobre él.

Ejemplo de trabajo:

 body { margin: 0px; } #page-banner img { width: 100%; object-fit: cover; height: 100vh; } #page-banner .vignette::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; box-shadow: inset 20em 5em 15em black; z-index: 0; } #page-banner .text { width: 50%; right: 50%; z-index: 1; } #page-banner .text-over-image { position: relative; } #page-banner .text-over-image p { font-size: 60px; color: white; margin: 0; position: absolute; top: 50%; left: 15%; right: 45%; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); transform: translate(-10%, -50%); }

 <section id="page-banner"> <div class="text-over-image vignette"> <img src="https://wallpaperaccess.com/full/5117570.jpg"> <div class="text"> <p>I am trying to learn adding vignette to images</p> </div> </div> </section>

almost 4 years ago · Santiago Trujillo Denunciar

0

No uses box-shadow. En su lugar, da tu ::after esto:

 background: hsla(0, 0%, 0%, 0.50);

luego dale a tu texto z-index = 1;

Simplemente juegue con el alfa de su color para obtener el aspecto deseado.

almost 4 years ago · Santiago Trujillo Denunciar

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-05-19T14:26:54.092Z

Necesita cambiar z-index: 1 a #page-banner .text-over-image p para mostrar el texto.

Para simular un efecto de suavidad puse una propiedad de opacidad.

Si desea un efecto realmente suave, intente cambiar su fuente o use font-smooth pero esta función no es estándar:

https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

 body { margin: 0px; } #page-banner img { width: 100%; object-fit: cover; height: 48vh; } #page-banner .vignette:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; -webkit-box-shadow: inset 20em 5em 15em black; -moz-box-shadow: inset 20em 5em 15em black; box-shadow: inset 20em 5em 15em black; z-index: 0; } #page-banner .text { width: 50%; right: 50%; } #page-banner .text-over-image { position: relative; } #page-banner .text-over-image p { z-index: 1; opacity: 0.88; font-size: 60px; color: white; margin: 0; position: absolute; top: 50%; left: 15%; right: 45%; transform: translate(-10%, -50%); animation: fadeIn 8s infinite alternate; } @keyframes fadeIn { from { left: 13%; opacity: 0.69; color: white; } to { left: 18%; opacity: 0.88; color: whitesmoke; text-shadow: 2px 2px 8px gray; } }

 <section id="page-banner"> <div class="text-over-image vignette"> <img src="https://wallpaperaccess.com/full/5117570.jpg"> <div class="text"> <p>I am trying to learn adding vignette to images</p> </div> </div> </section>

Actualizar:

Pongo una sugerencia de animación usando @keyframes alternando:

valores de opacity , left y text-shadow en 8s

 @keyframes fadeIn { from { left: 16%; opacity: 0.69; text-shadow: 2px 2px 8px whitesmoke; } to { left: 18%; opacity: 0.88; text-shadow: 2px 2px 8px gray; } }

0

333

Texto en una imagen con efecto viñeta CSS

3 Respuestas

0

0

Actualizar:

0

Encuentra empleos remotos

Andres GPT