[CSS图像库上的渐变

Question

我必须评论一些选择器或CSS错误。目标是在3张图片上应用渐变。这是可能的？只能使用CSS吗？

检查链接：http://homeagent.angratres.com.br

<div id="kt-kinetic-posts__3f3ddc" class="wp-block-kioken-kinetic-posts ha-blog-nomob is-grid order-cat-title-meta aligncenter design-is-stacked-center">
  <article class="grid-post grid-3">
    <div class="grid-post-row imgzoom-default ">
      <div class="grid-image-area">
        <div class="post-image">
          <a href="http://homeagent.angratres.com.br/home-office-e-oportunidade-para-empresas-na-contratacao-de-pcds/"><img width="403" height="438" src="http://homeagent.angratres.com.br/wp-content/uploads/2020/02/Novo-Projeto-1-min-1.jpg" class="attachment-large size-large wp-post-image" alt="Home office é oportunidade para empresas na contratação  de PcDs"
              srcset="http://homeagent.angratres.com.br/wp-content/uploads/2020/02/Novo-Projeto-1-min-1.jpg 403w, http://homeagent.angratres.com.br/wp-content/uploads/2020/02/Novo-Projeto-1-min-1-276x300.jpg 276w" sizes="(max-width: 403px) 100vw, 403px"></a>
        </div>
      </div>
      <div class="grid-content-area">
        <div class="title-meta-wrap">
          <div class="grid-content-category"><a href="http://homeagent.angratres.com.br/category/blog/">blog</a></div>
          <h4 class="grid-content-title"><a href="http://homeagent.angratres.com.br/home-office-e-oportunidade-para-empresas-na-contratacao-de-pcds/">Home office é oportunidade para empresas na contratação  de PcDs</a></h4>
        </div>
      </div>
    </div>
  </article>
  <article class="grid-post grid-3">
    <div class="grid-post-row imgzoom-default ">
      <div class="grid-image-area">
        <div class="post-image">
          <a href="http://homeagent.angratres.com.br/reduza-custos-com-a-operacao-noturna/"><img width="403" height="438" src="http://homeagent.angratres.com.br/wp-content/uploads/2020/02/Novo-Projeto-3-min.jpg" class="attachment-large size-large wp-post-image" alt="Reduza Custos com a Operação Noturna" srcset="http://homeagent.angratres.com.br/wp-content/uploads/2020/02/Novo-Projeto-3-min.jpg 403w, http://homeagent.angratres.com.br/wp-content/uploads/2020/02/Novo-Projeto-3-min-276x300.jpg 276w"
              sizes="(max-width: 403px) 100vw, 403px"></a>
        </div>
      </div>
      <div class="grid-content-area">
        <div class="title-meta-wrap">
          <div class="grid-content-category"><a href="http://homeagent.angratres.com.br/category/ebook/">ebook</a></div>
          <h4 class="grid-content-title"><a href="http://homeagent.angratres.com.br/reduza-custos-com-a-operacao-noturna/">Reduza Custos com a Operação Noturna</a></h4>
        </div>
      </div>
    </div>
  </article>
  <article class="grid-post grid-3">
    <div class="grid-post-row imgzoom-default ">
      <div class="grid-image-area">
        <div class="post-image">
          <a href="http://homeagent.angratres.com.br/a-home-agent-e-1-no-ranking-das-startups-de-customer-service-do-brasil/"><img width="403" height="438" src="http://homeagent.angratres.com.br/wp-content/uploads/2020/02/Novo-Projeto-2-min.jpg" class="attachment-large size-large wp-post-image" alt="A Home Agent é #1 no ranking das Startups de Customer Service do Brasil"
              srcset="http://homeagent.angratres.com.br/wp-content/uploads/2020/02/Novo-Projeto-2-min.jpg 403w, http://homeagent.angratres.com.br/wp-content/uploads/2020/02/Novo-Projeto-2-min-276x300.jpg 276w" sizes="(max-width: 403px) 100vw, 403px"></a>
        </div>
      </div>
      <div class="grid-content-area">
        <div class="title-meta-wrap">
          <div class="grid-content-category"><a href="http://homeagent.angratres.com.br/category/midia/">mídia</a></div>
          <h4 class="grid-content-title"><a href="http://homeagent.angratres.com.br/a-home-agent-e-1-no-ranking-das-startups-de-customer-service-do-brasil/">A Home Agent é #1 no ranking das Startups de Customer Service do Brasil</a></h4>
        </div>
      </div>
    </div>
  </article>
</div>

示例：

example

Answer 1

show_bg_2 {

background-image:
linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)), url('images/background.jpg');
width: 80%;
height: 400px;
background-size: cover;

}

尝试使用此代码作为参考。