0

Estoy intentando cambiar la opacidad de una foto al achicar la ventana y no logro hacerlo. Lo curioso es que si en vez de cambiar la opacidad coloco un display: none esto si funciona pero no lo primero. Intenté cambiar de tipo de selector CSS y el error sigue ocurriendo. ¿A qué se debe?

html

<div > <img src="gubernamental.jpg" alt="imagen edificio" id="primera-foto"> </div>

css:

#primera-foto {
  width: 100%;
  height: auto;
  bottom: 80px;
  opacity: 0.5;
}

@media screen and (max-width: 768px) {
  
  #primera-foto {
    width: 50%; 
    opacity: 1;   
    }
}
2
  • Comprueba que no estes pisando la regla más abajo en tu css
    – Yussef
    Commented el 18 nov. 2022 a las 5:49
  • Prueba con @media only screen and (max-width: 768px) {
    – masterguru
    Commented el 18 nov. 2022 a las 8:43

1 respuesta 1

1

Asegúrate de que el media query está bien, y prueba a ponerle un !important en la opacidad del media-query:

@media only screen and (max-width: 768px) {
 
  #primera-foto {
    width: 50%; 
    opacity: 1 !important;   
    }
}

Si con el !important te funciona, eso quiere decir que el problema está en que otro CSS te está pisando esa propiedad opacity.

Espero haberte ayudado! :)

1
  • gracias era eso. lo curioso es que no tengo otros elementos CSS que lo pisen. quizá bootstrap de alguna manera rara
    – favio
    Commented el 18 nov. 2022 a las 15:04

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.