html - 如何在每个不同的弹性框中添加不同的图像

Question

我是编码的菜鸟。实际上，我才刚开始不到 5 天。我正在 youtube 上查看开发人员提供的教程，该教程做得非常好。所以我只是跟着教程一起去。我试图让我的作品与他的作品有点不同。但是，我现在陷入了这个困境。

我想在“服务”部分的每个弹性框中都有不同的背景图像。但是由于某种原因，当我尝试为图像创建一个单独的 div 时（就像.icon和一样<p>），它似乎不能很好地工作，或者图像不能很好地放在整个框中。

当您按原样查看代码时，它们都具有相同的背景图像，主要是因为主容器保存了背景图像。

我似乎无法找到一种方法如何让每个盒子都具有不同的背景图像。

请帮忙！

/* Services Section */

#Services {
  background-color: #f4f6ff;
}

#Services .services {
  flex-direction: column;
  text-align: center;
  max-width: 1500px;
  margin: 0 auto;
  padding: 50px 0;
  background-color: #f4f6ff;
}

.header-title {
  font-size: 3rem;
  font-weight: lighter;
  color: black;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1rem;
  text-align: center;
}

#Services .section-header p {
  font-size: 1rem;
  font-weight: lighter;
  margin-top: 2px;
  margin-bottom: 20px;
  font-family: sans-serif;
}

#Services .services-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

#Services .services-content {
  flex-basis: 90%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 25px;
  border-radius: 10px;
  background-image: url(./img/customer-support.jpg);
  background-size: cover;
  margin: 10px 5%;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#Services .services-content::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(60deg, #0a2647 0%, #584a2a 100%);
  opacity: 80%;
  z-index: -1;
}

#Services .services-cards .icon {
  height: 90px;
  width: 50px;
  margin-bottom: 0;
}

`enter code here` #Services .services-content h2 {
  font-size: 1.2rem;
  color: gold;
  text-transform: uppercase;
}

<! -- Services Section -->
<section id="Services">
  <div class="services container">
    <div class="section-header">
      <h1 class="header-title">Services</h1>
      <p>I have worked with successful businesses over the years, I have helped companies activate their audience through social media marketing, facilitated the on-boarding process for their new customers.<br><br>I also managed projects for 20 plus brand
        ambassadors and led company team members so they can produce quality and engaging content delivered to our social media channels efficiently.</p>
    </div>
    <div class="services-cards">
      <div class="services-content">
        <div class="icon"><img src="" /></div>
        <h2>Customer Support</h2>
        <p>I have worked as a BPO Rep for 3 years. I have the fundamental knowledge in handling customer calls, emails and provide the adequate support, so that you can focus on the important aspect of your business.</p>
      </div>
    </div>
    <div class="services-cards">
      <div class="services-content">
        <div class="icon"><img src="" /></div>
        <h2>Administrative Assistant</h2>
        <p>Data entry, Research, Invoicing, Calendar Management, CRM maintenance, Appointment Setting, Recruitment, and more. I will take charge of the routine back-office tasks and you can keep focus on what matters for your brand.</p>
      </div>
    </div>
    <div class="services-cards">
      <div class="services-content">
        <div class="icon"><img src="" /></div>
        <h2>Porject Management</h2>
        <p>Launching a new product? Do you need help in Content creation and Scheduling? Or are you looking for a point-person to lead your marketing team and start pulling-in audience for your brand? I have 5 years of Social Media management experience,
          supported brands with different products catering to different demographics. I can develop a distinct strategy that will work for you. </p>
      </div>
    </div>
    <div class="services-cards">
      <div class="services-content">
        <div class="icon"><img src="" /></div>
        <h2>Front-End Web Development</h2>
        <p>I can hand-code HTML, CSS with some knowledge in CSS Flexbox, Bootstrap, and Javascript.</p>
      </div>
    </div>
  </div>
</section>

标签： htmlcssflexbox

Answer 1

如果你谈论

css

#Services .services-content {
...
background-image: url(./img/customer-support.jpg); 
...
}
#Services .services-content::after {
...
background-image: linear-gradient(60deg, #0a2647 0%, #584a2a 100%);
...
}

和这个 html

<div class="services-content">
...
</div>

您只需要添加另一个将为每个背景覆盖此属性的类background-image，.services-content因此

css

#Services .first-content {
...
background-image: url(diffrent); 
...
}
#Services .first-content::after {
...
background-image: linear-gradient(diffrent);
...
}
#Services .second-content {
...
background-image: url(diffrent); 
...
}
#Services .second-content::after {
...
background-image: linear-gradient(diffrent);
...
}

然后对于每个 html

<div class="services-content first-content">
...
</div>
<div class="services-content second-content">
...
</div>

这样你将覆盖你background-image唯一的，其余的css将保持不变