我正在尝试创建一个页面，其中在页面的插入部分下方有一个线性渐变背景，该背景不应显示渐变颜色。在下面的示例中，插图的顶部表现得如所愿，颜色保留在背景中。但出于某种原因，它下面的部分正在被 background:linear-gradient 渗透。
我不明白为什么:
* {
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>最佳答案
您缺少 #Safety id 的背景颜色属性。
#Safety{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin-top: 2px;
background-color: white;
}
关于html - css线性渐变背景问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46678231/