HTMl从这里开始
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Raleway:wght@400;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<link rel="stylesheet" href="./css/main.css" />
<title>Fylo | light theme page</title>
</head>
<body>
<header id="header-home">
<div class="container">
<nav class="nav-bar">
<img src="./images/logo.svg" alt="" />
<div class="nav-list">
<ul>
<li><a href="#" class="current">Features</a></li>
<li><a href="#">Sing In</a></li>
<li><a href="#">Team</a></li>
</ul>
</div>
</nav>
</div>
</header>
<section id="header-content">
<div class="container">
<div class="main">
<div class="header-content-1">
<h1 class="header-title">
All your files in one secure location accessible anywhere
</h1>
<p class="header-text">
Fylo stores your most important files in one secure location.
Access them wherever you need, share and collaborate with friends,
family, and co-workers.
</p>
<form action="" class="form">
<input
type="email"
name=""
id=""
placeholder="Enter your email"
class="input"
/>
<button class="btn-main">Get Started</button>
</form>
</div>
<div class="header-content-2">
<img src="./images/illustration-1.svg" alt="" />
</div>
</div>
</div>
</section>
<section id="productive">
<div class="container">
<div class="main-2">
<div class="main-context">
<h2 class="header">Stay Productive wherever you are</h2>
<p class="text-1">
Never let location be an issue whn accessing your files. Fylo has
you covered for all your file storage needs
</p>
<p class="text-2">
Securely share your files and folders with friends, family and
colleaues for live collaboration. No email attachment required
</p>
<a href="#" class="link"
>See how fylo works <img src="./images/icon-arrow.svg" alt=""
/></a>
<div class="card">
<img src="./images/icon-quotes.svg" alt="" />
<p class="card-text">
Fylo has improved our team productivity by an rder of magnitude.
Since making the switch our team has become a well-oiled
collaboration machine
</p>
<div class="avatar-info">
<img src="./images/avatar-testimonial.jpg" alt="" />
<div class="avatar-name">
<h4>Kyle Burton</h4>
<p>Founder& & CEO, Huddle</p>
</div>
</div>
</div>
</div>
<div class="image-container">
<img src="./images/illustration-2.svg" alt="" class="image-two" />
</div>
</div>
</div>`
</section>
</body>
</html>
CSS从这里开始
@import "variables";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
// color: #fff;
font-family: "Open sans", sans-serif;
line-height: 1.6;
}
a {
color: $links;
text-decoration: none;
}
// img {
// max-width: %;
// }
ul {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.6;
font-family: "Raleway", sans-serif;
color: $footer;
// text-align: center;
// margin: 10px 0;
}
p {
line-height: 1.6;
font-family: "Raleway", sans-serif;
font-size: 0.95rem;
// text-align: center;
// margin: 10px 0;
// color: ;
}
@import "utilities";
#header-home {
grid-area: header;
// display: grid;
.nav-bar {
display: grid;
grid-template-columns: 1fr 2fr;
// margin-top: 50px;
padding: 2rem 1.5rem;
position: sticky;
// justify-content: space-between;
ul {
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: end;
align-items: center;
height: 100%;
margin: 0;
li {
padding: 0 10px;
a {
font-size: 0.9rem;
text-transform: uppercase;
margin-right: 0.75rem;
border-bottom: 2px transparent solid;
padding: 2px 0;
transition: border-color 0.2s;
color: black;
&:hover {
border-color: $footer;
}
&.current {
border-color: $footer;
}
&:last-of-type {
margin-right: 0;
}
}
}
}
img {
max-width: 60%;
}
}
}
#header-content {
margin-top: 90px;
grid-area: section;
// height: 100vh;
.main {
display: grid;
grid-template-columns: 1fr 1fr;
.header-content-1 {
// justify-content: center;
// width: 200px;
grid-column: 1/2;
grid-row: 1/4;
.header-title {
align-self: flex-end;
font-size: 3rem;
// grid-column: 1/2;
}
.header-text {
grid-column: 1/2;
grid-row: 2/3;
// width: 80%;
margin-top: 20px;
// padding: 0 40px;
}
.form {
margin-top: 20px;
grid-column: 1/2;
grid-row: 2/3;
.input {
width: 300px;
padding: 15px;
border-radius: 4px;
border: 1px solid $bg-2;
&:focus {
outline: none;
}
}
}
}
.header-content-2 {
img {
grid-column: 2/3;
grid-row: 1/3;
max-width: 80%;
justify-self: center;
// margin-top: -10%;
align-self: center;
}
}
}
}
#productive {
// margin-top: 200px;
// // background-color: $bg-2;
// position: relative;
background-image: url(../dist/images/logo.svg);
background-color: hsl(240, 75%, 98%);
margin-top: 100px;
// position: relative;
padding: 50px 0;
// grid-area: section;
}
#productive部分上的图像背景。我已经尝试了很多方法，但没有响应。
答案 0 :(得分：1)
您可能需要指定背景宽度和位置。这是一个示例：
div {
width: 100px;
height: 100px;
background-image: url(https://images7.memedroid.com/images/UPLOADED891/5c39cdc9b5921.jpeg);
background-size: 100px;
background-position: center;
}<div>
</div>