div背景不是全尺寸，只有文本大小[重复]
Posted
技术标签:
【中文标题】div背景不是全尺寸，只有文本大小[重复]【英文标题】：div background not full size, only size of text [duplicate] 【发布时间】：2017-10-23 12:41:56 【问题描述】：我目前正在制作一个网页（使用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%，但它只会使图像稍微变大。我还想说宽度是正确的，我唯一的问题是让高度合适。
【问题讨论】：
尝试：背景尺寸：自动，自动；或背景尺寸：包含； 这是因为您使用了background-size:cover - 这意味着背景将被调整为足够大以“覆盖”该区域。当你给你的标题一个高度时，你是否也给了 html 和 body（以及任何其他祖先）一个高度
全尺寸是什么意思？ div 高度是文本的高度。你想要它的高度是多少？
className="header" 是这个反应的东西还是应该是class="header"
@tech_Love 似乎没有太大的不同。
【参考方案1】：
使用 100vh 作为视口（屏幕高度的 100%）
参考号：https://www.w3schools.com/css/css_rwd_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>【讨论】：
这有帮助，但是图像现在太宽了，只显示了图像垂直的 20%。 @JakeOrben 好的更新 这似乎奏效了！【参考方案2】：只要把背景放在body上：
.background
background: url("http://images.all-free-download.com/images/graphiclarge/black_texture_texture_background_06_hd_pictures_169901.jpg");
.header
position: relative;
background-size: cover;
background-repeat: no-repeat;
outline: 0;
display: block;
text-align: center;
color: lemonchiffon;
height: 100%;
<body class = "background">
<div class="header">
<h1 class="title">blah blah blah</h1>
<h4 class="greeting">blah blah blah</h4>
</div>
</body>
https://plnkr.co/edit/DDmWdwViw8aKI36EwOKM?p=preview
【讨论】：
【参考方案3】：当你想要全背景时，你的 div 也应该是全高
因为height:100%相对于父母的身高，你应该也让父母成为height:100%
一种选择是您可以使用
body
background: url("./blah.png");
position: relative;
background-size: cover;
background-position: center center; //added line
background-repeat: no-repeat;
outline: 0;
display: block;
text-align: center;
color: lemonchiffon;
min-height: 100%;
html
min-height:100%;
将您的 html 标记和您的身体至少拉伸到 100% 的高度。如果您只想将特定元素设为 100% 高度，我建议您使用 height: 100vh;，这会使 div 相对于客户端屏幕 100%
【讨论】：
【参考方案4】：如果您想要一个完整的页面背景，请定位 html。
html
background: url("./blah.png");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
【讨论】：
.html 是一个css选择器一个类，我认为你的意思是html 是的，谢谢@PatrickSampaio【参考方案5】：不能这样，元素不能动态调整为背景大小。
这里有一些选项
插入带有<img>-tag 的图像，用position: absolute 将h1 和h4 放在它上面
手动调整标题到图片高度：height: 300px
让图片缩小到div大小：background-size: contain
【讨论】：
【参考方案6】：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/
【讨论】：
这会将背景放置在整个页面上，而不仅仅是所需的div。以上是关于div背景不是全尺寸，只有文本大小[重复]的主要内容，如果未能解决你的问题，请参考以下文章