我试图设置一个图像到所有页面作为背景。我已经尝试设置
<body style="background-image: url(%PUBLIC_URL%/bp.jpg)">
但这并没有起到什么作用。所以我尝试将其添加到。
但这也没有起到什么作用。
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: url("./bg.jpg");
}
所以我最后一次尝试的是app.css，我的路由就在那里:
app.js:
import './App.css';
import { BrowserRouter as Router, Route } from "react-router-dom";
import CharacterFormView from "./views/CharacterFormView";
import SkillTreeView from "./views/SkillTreeView";
function App() {
return (
<div className="App">
<Router>
<Route exact path="/" component={CharacterFormView}/>
<Route path="/character-form" component={CharacterFormView}/>
<Route path="/skill-trees" component={SkillTreeView}/>
</Router>
</div>
);
}
export default App;
app.css:
.App {
text-align: center;
background: url("./bg.jpg") no-repeat;
background-size: cover;
}
最后一次尝试将背景图像设置为前两条路由和。即使在那里，它也不是全屏的，只到一半的页面。如果我转到-背景中没有图像
那么如何才能为所有页面设置相同的图片作为背景img呢？图像不应该只是全屏重复。我确信有一个更好的方法可以在我的项目的每个。css文件中设置它。
提前谢谢你。
背景可以包含在您的app.css中，但您需要这样使用它:
.App {
text-align: center;
background-image: url("./bg.jpg"); // here you had it wrong
background-size: cover;
}
这样，您的背景将呈现在您的主组件（在您的情况下是app.js）中，因此，呈现在它的所有子组件中
