时间轴 JS 透明背景

Posted 2023-05-07

【中文标题】时间轴 JS 透明背景

【英文标题】：Timeline JS Transparent Background

【发布时间】：2015-07-16 15:52:29

【问题描述】：

我花了好几个小时处理本地文件、CDN 等。我得到时间线显示的唯一方法是使用 嵌入式 js。更多关于我说的JS的信息：https://github.com/NUKnightLab/TimelineJS#config-options

所以我的代码看起来像这样：

html

<div id="timeline"></div>
<script src="http://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script>

JS

createStoryJS(
        type:       'timeline',
        width:      '100%',
        height:     '600',
        source:     'my json or excel,
        embed_id:   'timeline'           // ID of the DIV you want to load the timeline into
    );

再一次，为了获得对 css 和 js 文件的更多控制权，我DID尝试手动下载 css 和 js 文件，但无法让它们出现。

首先，我想我应该仍然能够覆盖 css 设置，即使它是一个 CDN（或者我可以不是吗？），我花了几个小时试图找到正确的类和 ID使背景透明（或者至少是我选择的颜色）。

我也尝试过这个文档，但是其中使用的很多东西已经过时并导致 jQuery 等问题：http://tutorialzine.com/2012/04/timeline-portfolio/

如果有人能找到这个神秘的类/ID 以便我可以定制这个东西，我将非常感激。提前致谢。

编辑

为了使这更容易理解，请使用此代码笔，例如：http://codepen.io/salmanjalali87/pen/oXMjmy 我得到了颜色，我可以改变颜色（种类）。但我不能把图像放在那里。有谁知道为什么？

【参考方案1】：

我在你的帖子上迷路了，很困惑，这是让它工作的代码

(1) - 你把它放在

<script src="http://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script>

(2) - 你把你的 div 放在 html 里面

<div id="timeline"></div>

(3) - 你放置 createStoryJS();

在 script 标记内和 document ready

内的

storyjs-embed.js

库调用之后

$( document ).ready(function() 

createStoryJS(
    type:       'timeline',
    width:      '100%',
    height:     '600',
    source:     'https://docs.google.com/spreadsheets/d/1oZNs-5eEMGbrIup1ZSj3Ovga-8wF2bVdNTBAiXFl08M/edit#gid=0',
    embed_id:   'timeline'           // ID of the DIV you want to load the timeline into
);

);

【讨论】：

大声笑你什么也没做，只是重申我的问题 :) 我知道如何让它显示出来。问题是我想覆盖一些css 属性以将背景颜色从白色更改（即使其透明）。我想知道那些选择器等等是否有意义。

感谢您的努力