div背景不全尺寸，仅为文本大小
div背景不全尺寸，仅为文本大小
提问于 2017-05-23 13:56:49
我目前正在制作一个网页(使用react.js)，并试图实现一个背景。我希望背景是它的全部大小，但它只是与它的div内的文本大小。下面是我目前使用的代码：app.js
<div className="header">
<h1 className="title">blah blah blah</h1>
<h4 className="greeting">blah blah blah</h4>
</div>app.css
.header {
background: url("./blah.png");
position: relative;
background-size: cover;
background-repeat: no-repeat;
outline: 0;
display: block;
text-align: center;
color: lemonchiffon;
height: 100%;
}我尝试过将height调整为100%，但是它只会使图像稍微大一些。我也想说宽度是正确的，我唯一的问题是让高度合适。
回答 6
Stack Overflow用户
回答已采纳
发布于 2017-05-23 14:02:32
使用100 as作为视口(屏幕高度的100%)
参考文献：viewport.asp
使用以下方法可以从body和h1中删除默认的页边距。
body, h1{
margin: 0;
}
.header {
background: url("http://placehold.it/1920x1080");
position: relative;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
outline: 0;
display: block;
text-align: center;
color: lemonchiffon;
height: 100vh;
margin: 0;
}
body, h1{
margin: 0;
}<div class="header">
<h1 className="title">blah blah blah</h1>
<h4 className="greeting">blah blah blah</h4>
</div>
Stack Overflow用户
发布于 2017-05-23 14:01:54
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: url("./blah.png");
}参考资料：https://css-tricks.com/perfect-full-page-background-image/
Stack Overflow用户
发布于 2017-05-23 14:01:26
如果您想要一个完整的页面背景，请将html作为目标。
html {
background: url("./blah.png");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44136884
复制相关文章
相似问题
腾讯云开发者
