我被这个图像背景和底部的条形图卡住了

我是Web开发的新手，我被这个图像背景卡住了，因为它没有使用100%的宽度，而且在右手边显示了一个空白的空白，我不知道它是什么，而且显示了底部的条形图。

我用的是崇高的文本。

如果有人能解释这个代码的错误，那将很有帮助。我不知道如何更好地解释它。

.container{
width:80%;
margin:auto;
overflow: hidden;
}
a:hover{
color:yellow;
}
#prof{
color:white;
font-size: 1.2;
}
#bottom h3{
color:black;
text-align: center;
font-weight: 1.2;
background-color: coral;
}
.button-1:hover{
color:yellow;
}
.button-1
{
background-color:white;
color: red;
font-weight: 1.2;
width:20%;
border:none;
border-radius: 15px;
}
body{
font-size: 16px;
line-height: 1.6;
font-family: sans-serif;
}
body a{
text-decoration:none;
color:white;
}
/*HEADER*/
header{
background-color:   #000000;
border-bottom: 3px red solid; 
}
header h1{
float: left;
}
header nav{
float: right;
margin-top: 35px;
}
header a{
padding:0px 10px;
font-size: 20px;
}
/*MIDDLE SECTION*/
#middle{
width:100%;
padding:60px;
margin:0px;
color: white;
text-align: center;
background: url('https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80') no-repeat 0;   
overflow: hidden;
}
#title-1{
background-color: black;
padding:-10px 0px;
color:white;
}
.container h3{
float:left;
width:70%;
font-family: sans-serif;
font-size: 25px;

box-sizing: border-box;
}
.container .button-1{
float:right;
width:30%;
font-family: sans-serif;
font-size: 20px;
margin-top:30px;

}

.float{ 
width:30%;
display: inline;
float: right;
padding: 30px 2px;
text-align: center;
color: black;
text-align: center;
}
.float img{
width: 30%

}
@media(max-width:768px){
header #prof, header nav, section .float{
float: none;
width:100%;
display: block;
text-align: center;
}
.container .button-1, .container h3{
width: 100%;
float: none;
display: block;
text-align: center;
}
.container .button-1{
padding-top: 10px 0px;
margin: 10px 0px;
}
}

<!DOCTYPE html>
<html>
<head>
<title>WinterMist</title>
<link rel="stylesheet" type="text/css" href="C:UsersRandomOneDriveDesktopMy worksitestyle.css">
</head>
<body>
<header>
<div class="container">
<h1 id="prof"><span style="color:red">Acme</span> Web Design</h1>

<nav>
<a href="#" style="color: red">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
</nav>
</div>
</header>
<section >

<div id="middle">
<div class="container">
<h1 style="font-size: 40px"><span style="color:black">Affordable</span> Professional <span style="color:red">Websites</span></h1>
<p style="font-size: 15px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut eni.</p>
</div>
</div>
</section>
<section id="title-1">
<div class="container">
<h3>Subscribe To Our Newsletter</h3>
<button class="button-1">Subscribe</button>
</div>
</section>
<section>
<div class="container">
<div class="float">
<img src="C:UsersRandomOneDriveDesktopMy workimghtml.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="float">
<img src="C:UsersRandomOneDriveDesktopMy workimgcss.png">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="float">
<img src="C:UsersRandomOneDriveDesktopMy workimgjs.png">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</section>
</body>
<footer id="bottom">
<h3>Copyright &#169; 2020 </h3>
</footer>
</html>

将此CSS用于背景图像，它还将从页面中删除水平滚动

#middle {
width: 100%;
padding: 60px;
margin: 0px;
color: white;
text-align: center;
background: url('https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80') no-repeat 0;
background-size: auto;
overflow: hidden;
background-size: cover;
box-sizing: border-box;
}

基本上，在.css文件中，在编写#中间样式的中间部分，您犯了一些错误。

*解决方案：

在封面模式下添加背景大小，这意味着任何图像都将设置为包含容器整个部分的背景(即使是短长度图像，也会被拉伸(。为了获得更好的视图，您可以在背景中添加固定中心
关于这个特定问题的这个片段不需要填充和边距(适用于chrome、mozilla firefox和MS Edge(
您可以添加等于100%的高度，以便在所有兼容的浏览器中更好地查看
在你的网页中，整个正文都有一些边距(出现在MS Edge和Chrome中(，所以我认为如果这是错误的，那么你可以在.css文件中的正文代码中添加margin:0px

*我更新的完整代码：

#middle{width:100%;height:100%;color:white;text-align:center;background:url('https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80') no-repeat fixed center;background-size:cover;overflow-x:hidden;}

在#middle中使用background-size: cover;希望它能在中工作

#middle {
width: 100%;
padding: 60px;
margin: 0px;
color: white;
text-align: center;
background: url(https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80) no-repeat 0;
overflow: hidden;
background-size: cover;
}

相关内容

最新更新

热门标签：