css - Vis.js 组背景样式

Question

我在 Angular5 项目中有一个 Vis.js 时间线，其中包含三个组和多个项目/事件。我想出了如何单独设置每个组背景的样式，以使交替的泳道更加明显，方法是：

.vis-background>.vis-group:nth-of-type(even) { 
    // there is an auto-generated empty group as the first .vis-group, so starting with the 2nd group
  background-color: $gray-lighter;
}

.vis-labelset>.vis-label:nth-of-type(odd) {
  background-color: $gray-lighter;
}

但是，垂直背景网格线在灰色组中不再可见。就好像组背景颜色分层在网格线之上。如果我添加z-index: 1;到.vis-vertical或.vis-grid线条和组颜色正确显示，但我失去了时间线缩放和移动功能。如何将样式应用于组，保持垂直网格线可见并保持所有时间线功能？

标签： csssassvis.jsvis.js-timeline

Answer 1

我使用的一种解决方法不能解决问题，但让它不那么臭名昭著，是这样定义组：

group=
{
    id : 0,
    content : 'My Group',
    style : "background: rgba(82, 226, 233, 0.2);"
};

并像这样定义一个背景项目

background_item=
{
    group : 0,
    start : '2018-10-29 00:00',
    end : '2018-10-30 02:00',
    type : 'background',
    className : 'myClassName'
};

className 来自这种风格：

.vis-item.vis-background.myClassName {
    background-color: rgba(82, 226, 233, 0.2);
}

它使用透明度来防止隐藏垂直线。

结果是这样的：

希望在有人找到明确的解决方案时有所帮助。