div背景不是全尺寸，只有文字大小

我目前正在製作一個網頁（使用react.js），我試圖實現一個背景。我希望背景是它的全尺寸，但它只是div中文本的大小。這是我目前使用的代碼：我試圖調整height到100%，但它只是使圖像稍大 app.jsdiv背景不是全尺寸，只有文字大小

<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%; 
}

。我也想說寬度是正確的，我唯一的問題是讓高度適當。

來源

2017-05-23 Jake Orben

試：background-size：auto，auto; OR background-size：contains; – tech2017

這是因爲您使用'background-size：cover' - 這意味着背景將被調整爲足夠大以「覆蓋」該區域。當您將標題擡高時，您是否還給html和body（以及其他任何祖先）一個高度 – Pete

全尺寸是什麼意思？ div高度是文本的高度。你想要什麼樣的身高？ –

使用100vh作爲視口（屏幕高度的100％）

REF：https://www.w3schools.com/css/css_rwd_viewport.asp

使用以下方法來從身體和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>

來源

2017-05-23 14:02:32

這會有所幫助，但現在圖像太寬，只顯示圖像垂直方向的20％。 –

@JakeOrben ok更新 –

這似乎工作！ –

如果您想要整頁背景，請定位html。

html { 
    background: url("./blah.png"); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

來源

2017-05-23 14:01:26

.html是一個CSS選擇器類，我認爲你的意思是html –

是的謝謝你@PatrickSampaio –

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/

來源

2017-05-23 14:01:54

這將背景放在整個頁面上，而不僅僅是所需的'div'。 –

它不能這樣做，該元件不能被動態調整，以背景的大小。

下面是一些選項

與<img> -tag插入圖像，放置在其頂部上的H1及H4與position: absolute
調整頭手動將圖像的高度：height: 300px
使圖像縮小到div的大小：background-size: contain

來源

2017-05-23 14:02:19 mos

時要充分背景的股利也應該是全高度因爲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;其相關度100％，使客戶端屏幕

來源

2017-05-23 14:05:26 necilAlbayrak

只要把上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

來源

2017-05-23 14:05:57 VSO

div背景不是全尺寸，只有文字大小

回答

相關問題