Question

我正在尝试创建一个页面，其中页面的插入部分下方有一个线性渐变背景，不应显示渐变颜色。在下面的示例中，插图的顶部按照需要运行，颜色保留在背景中。但由于某种原因，它下面的部分被background:linear-gradient渗透。

我无法弄清楚原因：

＆＃13;

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  font-family: sans-serif;
  line-height: 1.5;
}

.inset-container {
  background: linear-gradient(orange, black);
}

.inset {
  max-width: 80%;
  margin: auto;
}

.column-top {
  /*  eliminates the margin at the top of the first column, so all columns have even height  */
  margin-top: 0;
}

.columns {
  column-count: 2;
  column-gap: 40px;
  padding-bottom: 20px;
  padding-right: 80px;
}

.contents {
  font-size: 18px;
  padding-bottom: 40px;
  padding-top: 20px;
  padding-right: 30px;
  padding-left: 50px;
}

.articleBasic {
  padding-bottom: 40px;
  padding-top: 20px;
  padding-right: 30px;
  padding-left: 50px;
}


/*    ID formatting    */

#contents {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  background-color: white;
}

#Safety {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  margin-top: 2px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>gradient test</title>

</head>

<body>

  <div class="inset-container">

    <div class="inset">

      <nav id="contents" class="contents">
        <h3>Included in this month’s newsletter:</h3>

        <p><a href="#Safety" class="links">Safety First: Prescription Safety Glasses</a> - Find out who pays that bill in this months Safety First.</p>
        <p><a href="#Flux" class="links">Flux</a> - Which way to the problem? Splitters messing with your head? Read this Flux tip for clarification.</p>
        <p><a href="#MDUMaps" class="links">Tool Tip: MDU Maps</a> - Hey, My maps are blank in Divisional Viewer! Well, you’re doing it wrong!</p>
        <p><a href="#XM1" class="links">Tool Tip: XM1 Plant Design Maps</a> - Why does all the cool stuff go to the service department?</p>
        <p><a href="#Battery" class="links">The Battery Balancer</a> - How much more can we fit in that cabinet?!</p>
        <p><a href="#DMTicketing" class="links">DM Ticketing</a> - SASQ Watch because Big Bird was taken.</p>
        <p><a href="#ONX" class="links">Viavi’s ONX-630</a> - Initializing…… That’s an inside joke! You’ll get it later or will you? Just read this for a quick overview of the new meter.</p>
        <p><a href="#Tales" class="links">Tales From The Field</a> - Hello, Hello, HELLO! It’s ok to share with the group! Send us your pics!</p>
      </nav>

      <article id="Safety" class="articleBasic">
        <h3>Safety First: Prescription Safety Glasses</h3>
        <div class="columns">
          <a href="https://my-benefits.ehr.com/US2/EN/myHealth/Vision/Pages/default.aspx" target="_blank"><img class="safetyimg" src="https://i.imgur.com/qJWZi01.jpg" alt="funny animated dude with big glasses" title="Click me to go to the benefits page!"></a>
          <p class="column-top">Some of my fellow eyeglass wearers may not be aware that Comcast will pay for you to have your prescription safety glasses fully covered! I recently became aware of this information and wanted to share it with all of you. Per our ComcastNow
            website, in the Vision Benefits SPD: Davis Vision will cover 100% of the cost, VSP- Safety Vision Glasses (Employee only) Coverage 100% after $20 copay; $75 Frame allowance. This helps us all, with the struggle of trying to wear two sets of
            glasses in order to see and be OSHA compliant while working in the field. More information can be found at <a href="https://my-benefits.ehr.com/US2/EN/myHealth/Vision/Pages/default.aspx">https://my-benefits.ehr.com/US2/EN/myHealth/Vision/Pages/default.aspx</a>            regarding this great benefit. </p>
        </div>
        <a href="#contents" class="links">Back to Table of Contents</a>
      </article>

    </div>

  </div>

</body>

</html>

＆＃13;

Answer 1

您错过了#Safety ID的背景颜色属性。

#Safety{
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 margin-top: 2px;
 background-color: white;
}

Answer 2

为了澄清一下，您是否说Safety first区域也应该有白色背景？因为你没有在CSS中设置白色。

https://codepen.io/anon/pen/BwVowZ?editors=1100

css线性渐变背景问题

2 个答案: