html - 如何使此功能区横幅的侧面不透明?
问题描述
我想知道如何使底部功能区显示功能区的左侧和右侧?顶部的显示非常好,但是当我向页面添加背景颜色时,功能区的左侧和右侧消失了。
我已经坚持了一段时间,所以我想知道解决这个问题的解决方案是什么?先感谢您!
body {
text-align: center;
}
section {
background-color: aqua;
}
h6 {
display: inline-block;
font-size: 34px;
line-height: 28px;
color: #8699a0;
text-shadow: 0 0 1px #758890;
margin: 120px 0;
font-family: arial, verdana;
outline: none;
padding: 14px 30px;
position: relative;
text-transform: uppercase;
box-shadow:
0 0 30px 0 rgba(0, 0, 0, 0.1),
0 36px 0 -18px #b1e3e2;
}
/*the ribbon ends*/
h6:before {
content: "";
position: absolute;
top: 18px;
left: -15%;
z-index: -1;
width: 130%;
/*Using the triangle logic - 2-sided borders and 0 height. That will create negative triangles on the left and right.*/
height: 0;
border: 28px solid rgba(0, 0, 0, 0);
border-left: 28px solid #b1e3e2;
border-right: 28px solid #b1e3e2;
}
h6:after {
content:"";
width: 100%;
height: 0;
position: absolute;
top: 100%;
left: 0;
z-index: -1;
border-top: 18px solid #99acb2;
border-left: 18px solid transparent;
border-right: 18px solid transparent;
}
h6, h6:before {
background-image:
/*2 gray borders*/
linear-gradient(
transparent 8%,
rgba(0, 0, 0, 0.1) 8%,
rgba(0, 0, 0, 0.1) 14%,
transparent 14%,
transparent 86%,
rgba(0, 0, 0, 0.1) 86%,
rgba(0, 0, 0, 0.1) 92%,
transparent 92%
),
/*white gloss gradient*/
linear-gradient(
rgba(255, 255, 255, 0.75),
rgba(255, 255, 255, 0)
),
/*thin stripes*/
linear-gradient(
45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
),
/*white base*/
linear-gradient(white, white);
background-size:
cover, /*borders*/
cover, /*white gloss*/
4px 4px, /*thin stripes*/
cover; /*base white*/
}
h6, h6:before, h6:after {
box-sizing: border-box;
/*fix to make the borders appear on the ribbon ends as well*/
background-origin: border-box;
}
<h6>BUY ONLINE AND SAVE</h6>
<section>
<h6>BUY ONLINE AND SAVE</h6>
</section>
解决方案
问题是您使用 z-index-1 将 h6:before 和 h6:after 元素设置为背景一级,以将它们放在 h6 后面。
如果您向您的部分添加相对位置和任何值的 z-index,它将全部出现在前面。
section {
background-color: aqua;
position: relative;
z-index: 0; // works with any value
}
您的解决方案的重点是,通过将位置和 z-index 添加到您的部分,您将其定义为您的堆叠上下文根元素,而不是 HTML 根,自动移动任何子元素,即使它前面有负 z-index . 简而言之,这是堆叠顺序:
- 堆叠上下文的根元素
- 具有负 z-index 值的定位元素(及其子元素)(较高的值堆叠在较低的值之前;具有相同值的元素根据 HTML 中的外观堆叠)
- 非定位元素(按 HTML 中的外观排序)
- z-index 值为 auto 的定位元素(及其子元素)(按 HTML 中的外观排序)
- 具有正 z-index 值的定位元素(及其子元素)(较高的值堆叠在较低的值之前;具有相同值的元素根据 HTML 中的外观堆叠)
有关堆叠的更完整说明,请参阅以下文章 https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
推荐阅读
- python - 如何使用 sys.stdin.read() 输入一组用换行符分隔的字符串
- java - 调用 Module32First 给出无效参数(错误代码 87)
- node.js - 数据库结果到 REST PUT
- javascript - 正则表达式不捕获 JavaScript 中的组
- flutter - 如何在颤振中生成签名的apk
- selenium - 如何将数据提供者线程计数参数从 build.gradle 传递到 testng.xml
- c# - 如何通过 Azure 门户查询 ID 识别控制器方法/SQL 查询?
- r - 有没有一种方法可以有效地将两个表与存储在列表格式中的键连接起来
- javascript - React + TypeScript:如何修复“返回类型 'Element[]' 不是有效的 JSX 元素。”?
- airflow - 在循环中的任务之后运行气流任务,而不是在循环中的所有任务之后