reactjs - 在 React 中为我的页面设置背景
问题描述
我一直在开发一个简单的应用程序,我正在尝试为我的主页设置图像背景(图像覆盖了我的所有背景)我已经检查了 stackoverflow 上的许多答案,但我无法正确,我想知道如何解决?
App {
text-align: center;
height: 100%;
background: url("N.png") no-repeat;
background-size: cover;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-title {
font-size: 1.5em;
}
.App-intro {
font-size: large;
}
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
解决方案
将height
父元素的 设置为100%
也。
html,
body,
#root {
height: 100%;
}
推荐阅读
- javascript - Flexbox,滚动元素
- mysql - 为什么MYSQL时间比服务器时间晚2分钟
- reactjs - 动作完成时如何告诉 React-Redux 视图?
- mongodb - 为什么mongodb不能对复合索引的无前缀子索引进行有效排序?
- python - 如何将谷歌应用引擎的“软内存限制”增加到 2gb 以上
- javascript - 无法提交 Braintree 并出现验证错误
- loops - 迭代文件中的行时如何在匹配之前和之后输出行?
- javascript - 访问下拉列表的 DOM 元素
- javascript - 我怎样才能开发一个没有跳跃的响应式和粘性导航栏?
- css - 如何激活标签按钮?