Компонент изображения Next.js с линейным градиентом в качестве фона

avatar
Diego
1 июля 2021 в 17:27
1421
2
1

При разработке моей целевой страницы (с next.js) я решил использовать эту строку кода в качестве фона раздела.

background-image: linear-gradient(to bottom, rgb(123, 8, 255, 0.9), rgb(123, 8, 255, 0.87)), url("/main background img.jpg");

Но, поскольку next.js позволяет использовать компонент изображения для оптимизации, я попытался поместить тот же самый img в качестве фона следующим образом

<PresentationHero2>
    {/* Background */}
    <Image
     src="/main background img.jpg"
     alt=""
     layout="fill"
     objectFit="cover"
     />
</PresentationHero2>

Стили (со стилями-компонентами)

export const PresentationHero2 = styles.div`

position: relative;

width: 100%;
height: 663px;
 
background: linear-gradient(to bottom, rgb(123, 8, 255, 0.9), rgb(123, 8, 255, 0.87));

display: flex; 
align-items: center;
justify-content: center;

overflow: hidden;

`;

И все работает нормально, проблема в том, что я не вижу линейный градиент, так как же я могу использовать компонент изображения, но с использованием цвета фона? потому что единственное, что я вижу, это печальное изображение :/

Надеюсь, вы поможете мне с этим. Спасибо за ваше время!

Источник

Ответы (2)

avatar
Diego
1 июля 2021 в 19:50
0

Вы можете создать еще один div с шириной и высотой 100% и поместить туда фон (линейный градиент), чтобы вы могли видеть линейный градиент и изображение!

avatar
user2557097
5 февраля 2022 в 12:20
0

Вам нужно создать еще один div, установить его z-индекс равным 1 и абсолютное положение с шириной и высотой 100%. Таким образом, ваш градиент будет находиться поверх Next/Image.

<PresentationHero2>
    <div className="radialBackground"></div>
    <Image
     src="/main background img.jpg"
     alt=""
     layout="fill"
     objectFit="cover"
     className="bgImage"
     />
</PresentationHero2>

.radialContainer{
  z-index: 1;
  position: absolute;
  height: 100%;
  width:100%;
  background: linear-gradient(to bottom, rgb(123, 8, 255, 0.9), rgb(123, 8, 255,0.87));
}
.bgImage{
  z-index: 0;
}