2017-10-11 5 views
0

グラデーションカラーを表示しない、ページのインセットセクションの下にリニアグラデーションの背景があるページを作成しようとしています。下の例では、インセットの一番上のセクションは、色がバックグラウンドに留まるように、必要に応じて動作しています。しかし何らかの理由で、その下のセクションにbackground:linear-gradientが浸透しています。私は理由を理解することはできませんCSSリニアグラデーションバックグラウンド問題

:だけ明確にする

* { 
 
    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; 
 
}
<!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>

答えて

1

あなたは#Safety idの背景色プロパティを逃しています。

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

ありがとう、男の子は骨頭のように感じますか? – sunspore