为什么div的背景图片会消失？

时间：2017-12-29 05:49:33

标签： html css html5 background-image

我正在创建一个包含2个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>

6 个答案:

答案 0 :(得分：1)

元素需要一个高度：在你的例子中，id为grad1的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/

元素高度为0px的原因是因为您在子元素中编写了float: left

如果你在孩子后面加<div style="clear: both;"></div>，那么这个元素就有了理想的高度。

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

答案 1 :(得分：0)

使用div设置id="grad1"的高度，例如100px，然后会出现背景图像。

答案 2 :(得分：0)

如果你给div＆＃39; grad1＆＃39;一个高度，那么它就可以了。

＆＃13;
＆＃13; 
html, body
{
  height:100%;
}
#grad1
{
  height:100%;    
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

如果您想使用代码，请使用display: flex;到背景图片。

或者查看我更新的答案。

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

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>

答案 4 :(得分：0)

你的主要div没有包装浮动的子元素。在你的CSS中添加以下代码。 

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

希望这会有所帮助。

答案 5 :(得分：0)

注意：首先将图像保存在同一目录中：

www =＆gt; index.html，back.jpg

www是文件夹名称：

总是使用样式标签来设置html元素的样式，或者最好的选择是为样式目的创建一个新文件style.css或者＆＃39; anyname＆＃39; .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>
相关问题
最新问题