React.js设置backgroundImage

时间:2018-10-01 15:02:44

标签: javascript css reactjs

好吧,这已经困扰了我一段时间,在网上搜索了很多之后,我发现它应该可以在index.css中工作

body {
    background-image: url(../src/components/images/photo.jpeg) no-repeat center center 
    fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

但是它显然起作用了。有人可以告诉我如何解决此问题吗?

2 个答案:

答案 0 :(得分:3)

您使用的是长语法,该语法不支持url以外的其他值。因此,只需使用:

background-image: url(../src/components/images/photo.jpeg)

进一步,一种使用公用文件夹中图像的更好方法,因此可以这样使用:

background-image: url(/images/photo.jpeg)

要添加其他值,请使用:

background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;

要使用简写语法,请使用:

background: url(/images/photo.jpeg) no-repeat center center fixed; 

答案 1 :(得分:0)

尝试使用样式

<body
  style={{
    backgroundImage: `url(${imageUrl})`,
  }}
></body>