vis.js 时间线在项目上设置自定义背景颜色而不覆盖边框

Posted 2023-05-08

【中文标题】vis.js 时间线在项目上设置自定义背景颜色而不覆盖边框

【英文标题】：vis.js timeline set custom background color on items without overwriting borders

【发布时间】：2019-10-03 19:34:56

【问题描述】：

我正在使用 vis.js 时间线，并且正在尝试找到一种标记工作时间的方法（给他们不同的背景）。使用backgrundareas with groups example，我设法为特定日期的工作时间着色。

我不想使用标准的蓝色作为背景，所以为了避免这种情况，我添加了一个班级工作时间。然后我可以设置我的自定义颜色，但是单元格的边框会被隐藏，除非我也将不透明度设置为小于 1。

我有一个正在使用的配色方案，因此设置不透明度会改变颜色，我的工作时间在整个应用程序中看起来并不相同。

我正在使用此代码

.vis-item.vis-background.workhours 
    background: ##AFD9FE;
    opacity: 0.75;
  

其中 filterFromdate 是我的开始日期，durationDay 是我的时间线中的天数，而 startHour 和 endHour 定义了我的工作时间

  for (i=0; i<durationDays; i++) 
        items.add([
            
                id: "W"+i,
                start: moment(filterFromdate).add(i, 'days').hour(startHour).valueOf(),
                end: moment(filterFromdate).add(i, 'days').hour(dayEndHour).valueOf(),
                className : 'workhours',
                type: "background"
            
           ]);   
      

这个给我

谁能告诉我如何让我的课堂工作时间表现得像一个标准的 vis 背景课程（如 vis-today）？

或者是否有其他方法可以在特定时间（或几天）处理背景？

【参考方案1】：

感谢Issue 3773，我相信我可以设置 z-index，它成功了。

所以我的 css 最终变成了

.vis-item.vis-background.workhours 
    background: #AFD9FE;
    z-index: -1;