Question

好吧，这已经困扰了我一段时间，在网上搜索了很多之后，我发现它应该可以在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;
}

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

Answer 1

您使用的是长语法，该语法不支持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;

Answer 2

尝试使用样式

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

React.js设置backgroundImage

2 个答案: