css - 如何将 2 个不透明的元素连接起来看起来像一个?
问题描述
您可以看到箭头和矩形看起来不像一个元素。它们都是公共父元素的伪元素:
<div class="progress__control progress__control_to_next">
::before <!-- rectangle -->
<!-- ... -->
::after <!-- arrow -->
</div>
他们的风格:
.progress__control {
color: #ffffff;
&::before {
content: 'Завершить этап';
position: absolute;
left: 50%;
top: -26px;
width: 80px;
transform: translateX(-50%);
padding: 3px 6px;
box-sizing: border-box;
border-radius: 2px;
background-color: rgba(48, 63, 79, 0.9);
opacity: 0.8;
}
&::after {
content: '';
position: absolute;
left: 50%;
top: -9px;
transform: translateX(-50%);
box-sizing: border-box;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(48, 63, 79, 0.9);
opacity: 0.8;
}
}
有没有可能让它看起来像一个元素?
解决方案
在伪元素(及其背景颜色)上具有单独的不透明度,有时元素可能会重叠,从而产生更深的颜色。
删除不透明度和 rgba,以支持纯色。
潜在地,您可以调整父元素本身的不透明度,减少重叠颜色的出现......
.progress__control{
color: white;
opacity: 0.75;
}
.progress__control::before {
content: 'Завершить этап';
position: absolute;
left: 50%;
top: 50px;
width: 120px;
transform: translateX(-50%);
padding: 3px 6px;
box-sizing: border-box;
border-radius: 2px;
background-color: rgba(48, 63, 79, 1);
}
.progress__control::after {
content: '';
position: absolute;
left: 50%;
top: 73px;
transform: translateX(-50%);
box-sizing: border-box;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(48, 63, 79, 1);
}
<div class="progress__control"></div>
这是一个示例,它使事情变得不成比例,以测试重叠是否仍然发生...
body{background-color: #EEF; }
.progress__control{
color: white;
opacity: 0.5;
}
.progress__control::after {
content: 'Завершить этап';
position: absolute;
left: 50%;
top: 50px;
width: 200px;
text-align: center;
transform: translateX(-50%);
padding: 8px;
box-sizing: border-box;
border-radius: 2px;
background-color: rgba(48, 63, 79, 1);
}
.progress__control::before {
content: '';
position: absolute;
left: 50%;
top: 40px;
transform: translateX(-50%);
box-sizing: border-box;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 70px solid rgba(48, 63, 79, 1);
}
<div class="progress__control"></div>
推荐阅读
- java - 如何在 JPA 中使用给定 SQL 模型的继承
- java - 无法在 freemaker TemplateMethodModelEx 实现上自动装配
- r - 异常值是否用于计算 ggplot2 中箱形图中的分位数?
- java - ManyToMany - JPA - 如何从映射生成的表中获取数据?
- css - javascript google map 缩放到零时为空的灰色背景
- javascript - 如何在 Javascript 中获取 CSS 值并将其保存为变量?
- c# - 如何将选定的复选框移动到复选框列表的顶部
- c++ - 为什么vector会导致Segmentation fault Error?
- php - Websockets 不能通过 TLS/SSL 工作,但可以在没有 TLS/SSL 的情况下工作
- node.js - 使用 node-oracledb executeMany 删除多条记录