图像未完全显示(reactjs，css)
图像未完全显示(reactjs，css)
提问于 2018-07-11 07:01:01
我想要显示一个覆盖整个屏幕的图像，就像一个网站的登录页。但图像中唯一显示的部分是由于创建了更多的div而展开的部分。
react代码如下所示
export default props =>
<header className="masthead">
<div className="container">
<h1>Comapny Name</h1>
<h2>Company motto</h2>
<div className="container">
<h1> hoiluuluu</h1>
</div>
</div>
<div><h1>hello</h1></div>
</header>css：
header.masthead {
text-align: center;
color: white;
background-image: url("./header-bg.jpg");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}回答 1
Stack Overflow用户
发布于 2018-07-11 07:26:43
你可以绝对地定位你最上面的元素，并把它钉在所有的边上：
()示例
header.masthead {
text-align: center;
color: white;
background-image: url("./header-bg.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51275031
复制相关文章
相似问题