Tengo una imagen dentro de un componente y quiero superponer un fondo blanco de 0,6 encima.
import background from "../images/pageBG2.png"; //import an image for bg use var collectionWindowStyle = { div:{ backgroundImage: `url(${background})`, backgroundPosition: 'center', backgroundSize: 'cover', background: 'rgba(255,255,255,0.5)', color: "white", margin: "5px", padding: "5px", } , h1:{ color: "grey" }, }Entonces, pensé que si usaba "fondo" después de mi imagen, se superpondría con blanco puro, pero el alfa permitiría que la imagen apareciera un poco descolorida. Todo lo que sucede en mi aplicación de reacción es que la imagen es completamente blanca. ¿Que puedo hacer?
Y luego llamar a esto en el propio componente
const Bookcollection = () => { return( <div style={collectionWindowStyle.div}> ...Intenté googlearlo pero no encontré nada por mí mismo.
Establezca la posición del componente en relativa y coloque un div dentro. Luego dale a ese div secundario una posición de absoluto e inserción 0. Luego dale a ese mismo div un fondo blanco transparente.
Al escribir esto, está sobrescribiendo la imagen y reemplazándola con un fondo blanco.
backgroundImage: `url(${background})`, backgroundPosition: 'center', backgroundSize: 'cover', background: 'rgba(255,255,255,0.5)',Puedes crear una superposición con esto:
div:{ backgroundImage: `url(${background})`, backgroundPosition: 'center', backgroundSize: 'cover', color: "white", margin: "5px", padding: "5px", '&::before': { content: "", position: "absolute", left: 0, right: 0, top: 0, bottom: 0, background: "rgba(255,255,255,.5)", } }El css se ve así:
div:{ .... } div:before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(255,255,255,.5); }