2

Soy nuevo en html/css y estoy intentando colocar un color background sobre un texto y reducir la opacidad ÚNICAMENTE Del color de fondo, pero cuando lo intento no solo cambia la opacidad del fondo, sino que también la del texto. ¿Qué pordía hacer?

    <header class="titulo1">     <h1> <b> PRUEBAS DE CSS</b></h1>

    </header>
   </div>


.titulo1{
            background-color: lightblue;
          opacity: 50%;
          }

    

El color background sale con la opacidad del 50%, pero también el título

0

2 respuestas 2

1

Podes usar colores rgba o hlsa

Ejemplo:

body {
  background: url('https://estaticos.muyinteresante.es/media/cache/760x570_thumb/uploads/images/test/5af18b675bafe8cd7d3c986b/amigos.jpg')
}
.titulo1 {
  background-color: #add8e68c;
}
.titulo2 {
  background-color: rgba(0, 150, 251, .8);
}
<header class="titulo1">
  <h1><b>PRUEBAS DE CSS</b></h1>
</header>
<header class="titulo2">
  <h1><b>PRUEBAS DE CSS 2</b></h1>
</header>


Referencia:

1
  • Gracias, navegando un poco acabé encontrando la solución, aunque sin saber a ciencia cierta si era la óptima. Tu respuesta me lo ha confirmado 👍
    – Sanwych
    Commented el 8 abr. 2022 a las 20:41
0

La propiedad del padre tmb se le aplica a todos los hijos. Lo que podes probar es declarar la opacity:50; al background y a su vez (mas abajo por el efecto cascada), declarar al texto la propiedad de opacity:100

0

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.