在Reactjs中将背景图像设置为全屏
在Reactjs中将背景图像设置为全屏
提问于 2018-01-17 03:04:53
我试图在React中设置一个背景图像，但它只覆盖了大约75%的高度。
看起来组件并没有占据所有的高度。
解决方案是什么？
在index.js中：
ReactDOM.render(<Login />, document.getElementById('root'));在index.css中：
html, body, .Login-component {
height: 100%;
}在Login.js中：
render() {
return (
<div className='Login-component'>
);
}在Login.css中
.Login-component {
background: url(../static/login-bg.jpg) no-repeat center center fixed;
background-size: cover;
}最终结果：Screen shot
回答 5
Stack Overflow用户
回答已采纳
发布于 2018-01-17 04:17:20
尝试使用特定的属性值。
在Index.css中：
body, html {
height: 100%;
margin: 0;
}在Login.css中：
.Login-component {
/* The image used */
background-image: url(../static/login-bg.jpg);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}Stack Overflow用户
发布于 2020-02-09 04:25:27
使用vh和vw属性：
const styles = {
container: {
backgroundImage: `url(${backgroundImage})`,
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
width: '100vw',
height: '100vh'
}
};Stack Overflow用户
发布于 2018-06-09 06:33:29
图像应该在你的src文件夹中，此外，在你的组件中，你可以做以下事情。
const imgMyimageexample = require('../assets/imageexample.jpg');
const divStyle = {
width: '88%',
height: '800px',
backgroundImage: `url(${imgMyimageexample})`,
backgroundSize: 'cover' <---- This is important
};
export default class Mycomponent extends React.Component {
render() {
return (
<div className="cComponent" style={divStyle} >
<h1 align="center">Some header example</h1>
</div>
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48288176
复制相关文章
相似问题