<title>food</title>
<link href="bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src=""/>
</div>
<ul class="main-nav">
<li> <a href="" class="main_menu_second">Food Delivery</a></li>
<li> <a href="" class="main_menu_second">Food orders</a></li>
<li> <a href="" class="main_menu_second">Our Cities</a></li>
<li> <a href="" class="main_menu_second">Services</a></li>
</ul>
</div>
<div class="hero">
<h1>Welcome To <br> Luke's LandScaping Services</h1>
<div class="button-awesome">
<a href="" class="btn btn-half">Show me more</a>
<a href="" class="btn btn-full">I'M Hungry</a>
</div>
</div>
</header>
<section class="features">
<h3 class="text-centre">Professional Gardening Services Designed to Suit Your Preferences </h3>
<p class="copy">
</p>
<div class="container">
<div class="row">
<div class="col-md-3">
<i class="fa fa-certificate"></i>
<h4> Have Healthy Meals</h4>
<p class="arranging">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
</p>
</div>
<div class="col-md-3">
<i class="fa fa-camera"></i>
<h4> Have Healthy Meals</h4>
<p class="arranging">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
</p>
</div>
<div class="col-md-3">
<i class="fa fa-envelope"></i>
<h4> Have Healthy Meals</h4>
<p class="arranging">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
</p>
</div>
<div class="col-md-3">
<i class="fa fa-cog"></i>
<h4> Have Healthy Meals</h4>
<p class="arranging">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
</p>
</div>
</div>
</div>
</section>
<section class="meal">
<ul class="meal-showcase">
<li>
<figure class="meal-photo">
<img src="17.jpg">
</figure>
</li><li>
<figure class="meal-photo">
<img src="17.jpg">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="17.jpg">
</figure>
</li><li>
<figure class="meal-photo">
<img src="17.jpg">
</figure>
</li><li>
<figure class="meal-photo">
<img src="17.jpg">
</figure>
</li><li>
<figure class="meal-photo">
<img src="17.jpg">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="17.jpg">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="17.jpg">
</figure>
</li>
</ul>
</section>
<section class="area">
<h3 class="text-centre"> We Are Currently In These Areas</h3>
</section>
</body>
试图从图像中获取边距顶部以将它们分开但由于某种原因不起作用
尝试用谷歌搜索它，但没有任何帮助我迷路了哈
.区域 {
background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(lawnGarden.jpg);
height:100vh;
background-position:center;
background-size:cover;
background-attachment: fixed;
display:inline-block
margin-top:100px;
这只是我练习和学习的新手
最佳答案
删除 display-inline CSS 属性并尝试。
关于html - margin-top 不适用于 css 中的背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45459843/