divの背景画像が消えるのはなぜですか？

私はその中に2つのdivを含むdiv（背景イメージを持っています）を作成しています。 divの内側に浮動小数点を追加すると、背景イメージのdivが消えます。divの背景画像が消えるのはなぜですか？

助けてください！

<!DOCTYPE html> 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<head> 

</head> 
<body> 

    <h2>Linear Gradient as Background Image</h2> 
    <p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p> 

    <div id="grad1" style="background-image: URL(https://images.freecreatives.com/wp-content/uploads/2016/05/Awesome-Gradient-Background-.jpg); width:100%; margin-top:50"> 
      <div style="width:55%; padding: 10px; float:left;"> 
       <img alt="abc" src="https://upload.wikimedia.org/wikipedia/commons/0/09/Blue_computer_icon.svg" style="max-width: 75%; height: auto; margin:10%; " /> 
      </div> 
      <div style="width:35%;padding: 10px;float:left;"> 
       <h1 style="color:black; margin-top: 70px; font-weight:bolder; text-align:left;"> 
       Header<br> 
        <h3 style="color:red; text-align:left;">(Subtitle)</h3> 
       </h1> 
       <p style="color:black;"> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
        ullamco laboris nisi ut aliquip ex ea commodo consequat. 
        Duis aute irure dolor in reprehenderit in voluptate velit 
        esse cillum dolore eu fugiat nulla pariatur. Excepteur 
        sint occaecat cupidatat non proident, sunt in culpa qui 
        officia deserunt mollit anim id est laborum. 
       </p> 
      </div> 
     </div> 
</body> 
</html>

出典

2017-12-29 rashmee

：

あなたは、このリンクを好むことができますか？スタイルファイルを作成し、HTMLファイルにリンクするだけです。 –

要素には高さが必要です。例では、grad1というIDのdivの高さは0pxです。

<div id="grad1" style="background-image: URL(https://images.freecreatives.com/wp-content/uploads/2016/05/Awesome-Gradient-Background-.jpg); width:100%; margin-top:50; height:200px"> 
     <div style="width:55%; padding: 10px; float:left;">

https://jsfiddle.net/eza2zag4/

あなたがお子様の後<div style="clear: both;"></div>を入れた場合、要素は持っている子要素

でfloat: leftを書いたので、要素が0PXの高さを持っている理由は、理想的な高さ。

https://jsfiddle.net/eza2zag4/1/

出典

2017-12-29 05:59:15 fab

タイプミスで、それは：

でなければなりません。あなたは身長にする必要はありません – hdayi

例100pxにのためid="grad1"でdivの高さを設定した背景画像が表示されます。

出典

2017-12-29 05:59:55

div 'grad1'に高さを指定すると、動作します。

html, body 
 
{ 
 
    height:100%; 
 
} 
 
#grad1 
 
{ 
 
    height:100%;  
 
}

<!DOCTYPE html> 
 
<html> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<head> 
 

 
</head> 
 
<body> 
 

 
    <h2>Linear Gradient as Background Image</h2> 
 
    <p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p> 
 

 
    <div id="grad1" style="background-image: URL(https://images.freecreatives.com/wp-content/uploads/2016/05/Awesome-Gradient-Background-.jpg); width:100%; margin-top:50;"> 
 
      <div style="width:55%; padding: 10px; float:left;"> 
 
       <img alt="abc" src="https://upload.wikimedia.org/wikipedia/commons/0/09/Blue_computer_icon.svg" style="max-width: 75%; height: auto; margin:10%; " /> 
 
      </div> 
 
      <div style="width:35%;padding: 10px;float:left;"> 
 
       <h1 style="color:black; margin-top: 70px; font-weight:bolder; text-align:left;"> 
 
       Header<br> 
 
        <h3 style="color:red; text-align:left;">(Subtitle)</h3> 
 
       </h1> 
 
       <p style="color:black;"> 
 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
 
        sed do eiusmod tempor incididunt ut labore et dolore magna 
 
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
 
        ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
        Duis aute irure dolor in reprehenderit in voluptate velit 
 
        esse cillum dolore eu fugiat nulla pariatur. Excepteur 
 
        sint occaecat cupidatat non proident, sunt in culpa qui 
 
        officia deserunt mollit anim id est laborum. 
 
       </p> 
 
      </div> 
 
     </div> 
 
</body> 
 
</html>

出典

2017-12-29 06:02:21

あなたのコードを使用したい場合は、背景画像にdisplay: flex;を使用しています。

または更新された回答を確認してください。

html,body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 
    #grad1{ 
 
    background-image: URL(https://images.freecreatives.com/wp-content/uploads/2016/05/Awesome-Gradient-Background-.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    width: 100%; 
 
    height: auto; 
 
    background-position: center; 
 
    min-height:100%; 
 
    margin-top:50; 
 
    /* display: flex;*/ 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<head> 
 

 
</head> 
 
<body> 
 

 
    <h2>Linear Gradient as Background Image</h2> 
 
    <p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p> 
 

 
    <div id="grad1"> 
 
      <div style="width:55%; padding: 10px; float:left;"> 
 
       <img alt="abc" src="https://upload.wikimedia.org/wikipedia/commons/0/09/Blue_computer_icon.svg" style="max-width: 75%; height: auto; margin:10%; " /> 
 
      </div> 
 
      <div style="width:35%;padding: 10px;float:left;"> 
 
       <h1 style="color:black; margin-top: 70px; font-weight:bolder; text-align:left;"> 
 
       Header<br> 
 
        <h3 style="color:red; text-align:left;">(Subtitle)</h3> 
 
       </h1> 
 
       <p style="color:black;"> 
 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
 
        sed do eiusmod tempor incididunt ut labore et dolore magna 
 
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
 
        ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
        Duis aute irure dolor in reprehenderit in voluptate velit 
 
        esse cillum dolore eu fugiat nulla pariatur. Excepteur 
 
        sint occaecat cupidatat non proident, sunt in culpa qui 
 
        officia deserunt mollit anim id est laborum. 
 
       </p> 
 
      </div> 
 
     </div> 
 
</body> 
 
</html>

https://www.w3schools.com/css/css3_flexbox.asp

出典

2017-12-29 06:04:12

あなたのメインのdiv浮かべ子要素をラップしていません。あなたのCSSの下にコードを追加してください。

#grad1:after{ 
    content:""; 
    clear:both; 
    display:block; 
    visibility:hidden; 
    height:0; 
}

希望すると、これが役立ちます。

出典

2017-12-29 06:04:19

注：

WWW => index.htmlに、WWWは、フォルダ名である

back.jpg：用

常に使用スタイルタグまずそのような同じディレクトリに画像を保存しますhtml要素をスタイリングするか、最善の選択は、スタイリング目的のための新しいファイルを作成することです。style.cssまたは 'anyname'.cssこれは良い方法です。なぜあなたは、インラインCSSを使用しているhttps://www.w3schools.com/css/css3_backgrounds.asp

<!DOCTYPE html> 
    <html> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <head> 
     <style> 
      #grad1 { 
       background-image: url('back.jpg'); 
       background-repeat: no-repeat, repeat; 
       padding: 15px; 
       width: 550px; 
      } 
     </style> 
    </head> 
    <body> 

     <h2>Linear Gradient as Background Image</h2> 
     <p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p> 

     <div id="grad1"> 
       <div style="width:55%; padding: 10px;"> 
        <img alt="abc" src="https://upload.wikimedia.org/wikipedia/commons/0/09/Blue_computer_icon.svg" style="max-width: 75%; height: auto; margin:10%; " /> 
       </div> 
       <div style="width:35%;padding: 10px;float:left;"> 
        <h1 style="color:black; margin-top: 70px; font-weight:bolder; text-align:left;"> 
        Header<br> 
         <h3 style="color:red; text-align:left;">(Subtitle)</h3> 
        </h1> 
        <p style="color:black;"> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
         sed do eiusmod tempor incididunt ut labore et dolore magna 
         aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
         ullamco laboris nisi ut aliquip ex ea commodo consequat. 
         Duis aute irure dolor in reprehenderit in voluptate velit 
         esse cillum dolore eu fugiat nulla pariatur. Excepteur 
         sint occaecat cupidatat non proident, sunt in culpa qui 
         officia deserunt mollit anim id est laborum. 
        </p> 
       </div> 
      </div> 
    </body> 
    </html>

出典

2017-12-29 06:13:55

divの背景画像が消えるのはなぜですか？

答えて

関連する問題