html - 在全出血背景上创建一段白色背景

Question

我正在使用名为“photodeck”的构建器为企业构建一个摄影网站。

问题是构建器不允许我在菜单和 Logo 后面创建背景，因此我必须通过编辑主题 CSS 和 HTML 来完成此操作 - 我是一名编码菜鸟，经过大量实验我无法让它工作。

Codepen 链接:https://codepen.io/gknowl/pen/PeJbOE (对于 CSS 和 HTML)

HTML(所以我可以发布 codepen 链接):

<pd-page>
  <pd-block id="navib" class="dont_overlap">
    <pd-component id="logo" type="logo_text" />
    <div id="navlinks">
      <pd-component id="menu" type="menu" />
      <pd-component id="local" type="locale_switcher" />
    </div>
  </pd-block>
  <pd-component id="hdtxt" type="text" class="dont_overlap" />
  <div id="title_and_main_content_wrapper">
    <div id="main_block">
      <pd-component id="mainc" type="main_content" />
      <pd-component id="commt" type="comments" />
      <pd-component id="searc" type="search" drawer="duration:0.3,rotate_alt_content:90,init_state:closed,alt_content_pos:center,alt_content:,effect:slide_from_right" />
    </div>
  </div>
  <pd-block id="footer" class="reserved_height dont_overlap">
    <pd-component id="fttxt" type="text" />
    <pd-component id="links" type="external_links" />
  </pd-block>
  <pd-component id="pwrdb" type="poweredby" />
</pd-page>

图片:https://imgur.com/Fg62kt9 (我希望绿色条上方的部分具有浅灰色背景)

奖励:如果有人能帮我把 Logo 也做得更大，那将是一个很大的帮助， builder 将尺寸限制为图片中的尺寸

如果这太基础，或者太明显，我深表歉意 - 但我完全被困住了。

Answer 1

好吧，您的构建器 HTML 标记正在 codepen 中呈现，所以我将尝试为您提供建议，您可以在哪些地方进行更改以获得所需的结果。

用于使 Logo 更大。在此类中添加增加的宽度和高度。对于响应性，也会更改不同媒体查询中同一类的宽度。

#ws_page #component_logo {
  width: //As per need;
  height: //As per need
}

导航背景颜色试试这个:

#ws_page #block_navib {
  background: #ccc;
}