html - CSS:如何设置从点到窗口边缘的背景？

Question

我的网站遇到了一个小问题。在几个地方我必须应用这种东西:

更具体地说，我需要这个红色区域是这种较浅的绿色。这意味着我必须将背景应用到元素，从某个地方一直到边缘。它必须是动态的 (RWD)。所以这让我很困扰，因为我敢打赌这很容易解决。

代码在这里:

<div class="menu container-fluid">
    <nav class="innermenu container relative">
        <ul class="menu-list large standard">
            <li class="home-link-menu-li">
                <h3>
                    <a href="/" title="Strona główna">
                        <img src="/public/images/1px.gif" alt="Strona główna" class="px1">
                    </a>
                </h3>
            </li>
            <li>
                <h3>
                    <a href="/" title="Strona główna" id="headlink9" class="spanhover mainlevel">
                        <span>Strona główna</span>
                        <img src="/public/images/1px.gif" alt="" class="px1">
                    </a>
                </h3>
            </li>
            <li>
                <h3>
                    <a href="/pl/i/Informacje-o-firmie/16" title="O nas" id="headlink12" class="spanhover mainlevel">
                        <span>O nas</span>
                        <img src="/public/images/1px.gif" alt="" class="px1">
                    </a>
                </h3>
            </li>
            <li>
                <h3>
                    <a href="/pl/n/list" title="Blog" id="headlink11" class="spanhover mainlevel">
                        <span>Blog</span>
                        <img src="/public/images/1px.gif" alt="" class="px1">
                    </a>
                </h3>
            </li>
            <li>
                <h3>
                    <a href="/google.pl" title="Galeria" id="headlink13" class="spanhover mainlevel">
                        <span>Galeria</span>
                        <img src="/public/images/1px.gif" alt="" class="px1">
                    </a>
                </h3>
            </li>
            <li>
                <h3>
                    <a href="/pl/i/Gwarancja/12" title="Gwarancja" id="headlink7" class="spanhover mainlevel">
                        <span>Gwarancja</span>
                        <img src="/public/images/1px.gif" alt="" class="px1">
                    </a>
                </h3>
            </li>
            <li>
                <h3>
                    <a href="/pl/i/Kontakt/15" title="Kontakt" id="headlink6" class="spanhover mainlevel">
                        <span>Kontakt</span>
                        <img src="/public/images/1px.gif" alt="" class="px1">
                    </a>
                </h3>
            </li>
        </ul>

        <div class="newsletter-top hidden-xs hidden-sm">
            <form action="#" method="post">
                <fieldset>
                    <input type="text" name="email" value="" placeholder="Wpisz adres e-mail" class="newsletter-input">
                    <button type="submit" class="btn btn-red">
                        <img src="/public/images/1px.gif" alt="" class="px1">
                        <span>Subskrypcja</span>
                    </button>
                </fieldset>
            </form>
        </div>
    </nav>
</div>

和CSS(少文件):

.menu{
z-index: 10;
position: relative;
background: @getecomGreenDark;

.innermenu{
height: 58px;
line-height: 58px;
position: relative;
z-index: 10;

.newsletter-top {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;

  form {
    margin: 0;
    height: 100%;
    width: 300px;

    input {
      height: 100%;
      position: absolute;
      top: 0;
      right: 100px;
      border: 0;
      background: @getecomGreenLight;
      color: #fff;
      max-width: none;
      width: 200px;
      padding: 0 0 0 15px;
    }

    button {
      height: 100%;
      max-height: none;
      position: absolute;
      top: 0;
      right: 0;
      width: 100px;
      max-width: none;
      background: @getecomGrey;
      color: #000;
      border: 0;
      text-transform: uppercase;
      font-size: 12px;
      padding: 2px 0 0 0;

      .border-radius(0);

      &::after {
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #EDEDED;
        content: '';
        position: absolute;
        left: -10px;
        top: 20px;
      }
    }
  }
}

我正在添加整个菜单栏的另一个 SS:

Answer 1

所以，我找到了答案。伪类派上用场。

看看我在之前的代码中更改了什么。

.menu{
  z-index: 10;
  position: relative;
  height: 58px;

    /* right */
    &::before {
      content: '';
      background: @getecomGreenLight;
      height: 100%;
      width: 50%;
      position: absolute;
      right: 0;
      top: 0;
    }

    /* left */
    &::after {
      content: '';
      background: @getecomGreenDark;
      height: 100%;
      width: 50%;
      position: absolute;
      left: 0;
      top: 0;
    }

    .innermenu{
      height: 58px;
      line-height: 58px;
      position: relative;
      z-index: 10;
      background: @getecomGreenDark;

  ....

基本上我们有一个 .menu 元素，其中我们有 .innermenu。所以我们按如下方式做:

1. 为 .innermenu 设置背景 - 这样它将覆盖中心(在我的例子中)
2. 为 .menu 设置 ::before - 它将作为右侧工作，我们给它一个我们想要的背景，并将其设置为宽度、位置的 50%绝对的，右边为 0 - 所以它总是粘在右边，并且总是有 50%
3. ::after 相同 - 50% 宽度，绝对位置和 left = 0

这是这个想法的草图:

我想这是解决它的最佳方法。