我正在创建一个包含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>
答案 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>，那么这个元素就有了理想的高度。
答案 1 :(得分：0)
使用div设置id="grad1"的高度，例如100px，然后会出现背景图像。
答案 2 :(得分：0)
如果你给div＆＃39; grad1＆＃39;一个高度，那么它就可以了。
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>
答案 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>