Установка цвета фона на прозрачном изображении в Yet-Another-React-Lightbox
Я работаю с еще одним реактивным лайтбоксом в NextJS, и я хотел установить цвет фона изображения для изображения PNG.
Вот как у меня есть компонент Lightbox:
<Lightbox
plugins = {[Zoom]}
open = {open}
closeOnBackdropClick = {true}
close = {() => setOpen(false)}
controller = {{ closeOnBackdropClick: true }}
slides = {[
{ src: imagePath },
]}
styles = {{ container: { backgroundColor: "rgba(0, 0, 0, .8)" } }}
carousel = {{ finite: true }}
render = {{
buttonPrev: () => null,
buttonNext: () => null,
iconZoomIn: () => null,
iconZoomOut: () => null
}}
zoom = {{
maxZoomPixelRatio: 3,
}}
/>
В этом случае styles изменяет цвет всего фона, но я хочу изменить только цвет фона изображения. Моя идея состоит в том, чтобы установить это свойство background-color в yarl__slide_image (класс тега img), но я не настолько хорошо разбираюсь в CSS, чтобы сделать это.
Есть ли что-нибудь, что я могу сделать, чтобы стилизовать лайтбокс таким образом? Есть ли в Lightbox свойство, которое я могу использовать для этого? Я также пытался изменить его, переопределяя slide внутри свойства render, но это не сработало.
Ответы 1
Вы можете установить фоновое изображение лайтбокса с помощью следующего css:
<style jsx global>{`
.yarl__slide_image {
background-color: rgba(255, 255, 255, 0.8);
}
`}</style>
Вот минимальный рабочий пример — https://codesandbox.io/p/sandbox/stackoverflow-76122862-7s4ygw?file=%2Fpages%2Findex.jsx