Question

我是新手做出反应，我一直在努力实现我目前定义的视差效果 -

<section className="section parallax backgroundImageProp"></section>

我正在使用css提供背景图片 -

.backgroundImageProp::after{
background-image: url('https://republic-prod.azureedge.net/republic-prod/stories/promolarge/xxhdpi/15207762165aa53418177b5.jpeg');
background-repeat: no-repeat;

}

目前图像是硬编码我想让它动态渲染，但我多次尝试后无法这样做，我使用下面的样式添加css -

var backgroundImageAfter = {
  after:{backgroundImage:'url(' + image_url + ')'},
};

<section className="section parallax" style={backgroundImageAfter}>
</section>

但这也没有帮助。我在这里遗漏了一些东西。请帮忙。

Answer 1

您必须在div元素之后添加style={backgroundImageAfter} section，并从样式对象中删除after。

var backgroundImageAfter = {
  backgroundImage:'url(' + image_url + '),
};

<section className="section parallax">
</section>
<div style={backgroundImageAfter}></div>

动态backgroudImage：元素之后

1 个答案: