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>
谢谢，男孩，我觉得自己像个笨蛋。 – sunspore