html背景画像が正常に表示されない

画像表示に問題があります。以下は私のコードです：html背景画像が正常に表示されない

.night-sky { 
 
    position: relative; 
 
    height: 100%; 
 
    margin: 0; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%); 
 
    background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%); 
 
} 
 
.night-sky:before { 
 
    height: 100%; 
 
    width: 100%; 
 
    content: ' '; 
 
    position: absolute; 
 
    top: 0; 
 
    /* http://bg.siteorigin.com/ */ 
 
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png"); 
 
    opacity: .1; 
 
} 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    background: #000; 
 
}

<body> 
 
    <div class="night-sky"> 
 
    <p>qerqwer</p> 
 
    <p>hahahh</p> 
 
    </div> 
 
</body>

これは、それが今のように見える方法です：私はクラスのdiv class = "night-sky"間の段落を追加しなかった場合

、それはただ何も示していない。私はちょうどbackground-imageを体内に追加すれば正しく表示されます。私は何が間違っているのか分からない。

ありがとうございました。

出典

2016-11-14 BeNice

可能性が高いです。要素がなければ、夜空の幅と高さがあります。したがって、bgは見えません。パラグラフのないサンプルのフィドルを見てください。 https://jsfiddle.net/5a2xowwg/ – aVC

リンク：-http：//www.html.am/html-codes/image-codes/background-image-code.cfm –

html, body { height: 100%; width: 100%; margin: 0;} 
 

 
.night-sky { 
 
    position: relative; 
 
    height: 100%; 
 
    margin: 0; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%); 
 
    background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%); 
 
} 
 
.night-sky:before { 
 
    width: 100%; 
 
    content: ' '; 
 
    position: absolute; 
 
    top: 0; 
 
    /* http://bg.siteorigin.com/ */ 
 
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png"); 
 
    opacity: .1; 
 
} 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    background: #000; 
 
}

<body> 
 
    <div class="night-sky"> 
 
    <p>qerqwer</p> 
 
    <p>hahahh</p> 
 
    </div> 
 
</body>

出典

2016-11-14 03:06:11 mrid

ありがとう、mrid！、私はたくさんのことを学んだ。 – BeNice

はhtmlにheight: 100%を追加し、それが問題を解決するだろう。

ヒント：

これでトップに余裕があるだろうことがわかります - これは（あなたがthis SO threadでそれについての詳細を読むことができる）を崩壊マージンによるものです。これはとnight-sky

完了にそれをborderを追加、削除するには、次のように身体にはスクロールバーが存在しないことを

* { box-sizing: border-box; }

からborder-boxがthis SO thread

に重要である理由を知ります乾杯！

* { box-sizing: border-box; } html{ height: 100%; } .night-sky { position: relative; height: 100%; margin: 0; border: 1px solid black; background-repeat: no-repeat; background-attachment: fixed; background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%); background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%); } .night-sky:before { height: 100%; width: 100%; content: ' '; position: absolute; top: 0; /* http://bg.siteorigin.com/ */ background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png"); opacity: .1; } body { height: 100%; margin: 0; background: #000; }

<body> <div class="night-sky"> <p>qerqwer</p> <p>hahahh</p> </div> </body>

出典

2016-11-14 03:14:15 kukkuz

@BeNiceさん、これについてのフィードバックをありがとう！ – kukkuz

このお試しください： - あなたがパーセンテージで高さを有し、かつ幅が定義されていないので、

<div style="background-image:url(http://www.html.am/images/image-codes/milford_sound_t.jpg);width:220px;height:140px;"> 
 

 
</div>

出典

2016-11-14 05:54:03

必要に応じて、高さと幅を自由に変更できます。 –

html背景画像が正常に表示されない

答えて

関連する問題