如何在wordpress的图像滑块下添加绿色框？答案

【问题标题】：How to add green box under image slider in wordpress?如何在wordpress的图像滑块下添加绿色框？
【发布时间】：2022-08-19 17:57:45
【问题描述】：

我有一个 wordpress 网站，我使用的是宽敞的主题。我要存档的只是图像滑块下的一个绿色框。所以图片滑块的代码是这样的：

<section id=\"featured-slider\">
   <div class=\"slider-cycle\" style=\"height: 465.922px;\">
   <nav id=\"controllers\" class=\"clearfix\">
      <a class=\"active\"/>
      <a class=\"\"/>
      <a class=\"\"/>
      <a class=\"\"/>
      <a class=\"\"/>
   </nav>
   <div class=\"slides displayblock cycle-slide cycle-slide-active\" style=\"position: absolute; top: 0px; left: 0px; z-index: 99; opacity: 1; display: block; visibility: visible;\">
   <figure>
   <img class=\"lazy loaded\" width=\"1500\" height=\"655\" alt=\"\" src=\"https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-1-meeuwen-1500-655-slider-2.png\" data-src=\"https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-1-meeuwen-1500-655-slider-2.png\" data-was-processed=\"true\">
   </figure>
   <div class=\"entry-container\">
   <div class=\"clearfix\"/>
   <a class=\"slider-read-more-button\" href=\"https://www.nieuwdenhaag.nl/doe-mee-2/\" title=\"\">Doe mee</a>
   </div>
   </div>
   <div class=\"slides displaynone cycle-slide\" style=\"position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden; opacity: 0; display: block;\">
   <figure>
      <img class=\"lazy loaded\" width=\"4950\" height=\"2162\" alt=\"\" src=\"https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/Mensen-in-het-park-Den-Haag.png\" data-src=\"https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/Mensen-in-het-park-Den-Haag.png\" data-was-processed=\"true\">
   </figure>
   <div class=\"entry-container\">
      <div class=\"clearfix\"/>
         <a class=\"slider-read-more-button\" href=\"https://www.nieuwdenhaag.nl/steun-ons/\" title=\"\">Steun ons</a>
      </div>
   </div>
   <div class=\"slides displaynone cycle-slide\" style=\"position: absolute; top: 0px; left: 0px; z-index: 96; visibility: hidden; opacity: 0; display: block;\">
   <figure>
      <img class=\"lazy loaded\" width=\"4350\" height=\"1899\" alt=\"\" src=\"https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-3-zomer-Den-Haag-kinderen-spelen-slider.png\" data-src=\"https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-3-zomer-Den-Haag-kinderen-spelen-slider.png\" data-was-processed=\"true\">
   </figure>
   <div class=\"entry-container\">
      <div class=\"clearfix\"/>
         <a class=\"slider-read-more-button\" href=\"https://www.nieuwdenhaag.nl/verbind-op-locatie-of-thema/\" title=\"\">Verbind op locatie of thema</a>
      </div>
   </div>
   <div class=\"slides displaynone cycle-slide\" style=\"position: absolute; top: 0px; left: 0px; z-index: 95; visibility: hidden; opacity: 0; display: block;\">
   <figure>
      <img class=\"lazy loaded\" width=\"4799\" height=\"2095\" alt=\"\" src=\"https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/terras-vol-Den-Haag-blur-TEST-5250-2095-TEST.png\" data-src=\"https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/terras-vol-Den-Haag-blur-TEST-5250-2095-TEST.png\" data-was-processed=\"true\">
   </figure>
   <div class=\"entry-container\">
      <div class=\"clearfix\"/>
         <a class=\"slider-read-more-button\" href=\"https://www.nieuwdenhaag.nl/word-lid/\" title=\"\">Word lid en één van ons</a>
      </div>
   </div>
   <div class=\"slides displaynone cycle-slide\" style=\"position: absolute; top: 0px; left: 0px; z-index: 100; visibility: hidden; opacity: 0; display: block;\">
      <figure>
         <img class=\"lazy loaded\" width=\"4200\" height=\"1834\" alt=\"\" src=\"https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/surfers-strand-test-4200-1834-ICARUS-2.png\" data-src=\"https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/surfers-strand-test-4200-1834-ICARUS-2.png\" data-was-processed=\"true\">
      </figure>
      <div class=\"entry-container\">
         <div class=\"clearfix\"/>
            <a class=\"slider-read-more-button\" href=\"https://www.nieuwdenhaag.nl/evenementen/\" title=\"\">Evenementen &gt;&gt;&gt; agenda</a>
         </div>
      </div>
   </div>
</section>

我用这样的css尝试它：

#featured-slider img {
 border-bottom: 70px solid  #72BF44;
  width: 1067x;
  height: 466px;
}

但这不是正确的方法。因为图像正在发生变化。绿盒也从图像中占用空间。

我还想在绿色框中添加一些文字。

所以我添加了一个图像它的外观。

与绿色框中的文字。我正在使用 Guttenberg 布局来编辑页面。

标签： html css wordpress-theming wordpress-gutenberg

【解决方案1】：

添加包含以下内容的“自定义 HTML”块：

<div style="background:#72BF44;height:70px"></div>

【讨论】：