如何将背景图像放在 cytoscape js 中的节点边界上？答案

【问题标题】：How to put background-image over the node borders in cytoscape js?如何将背景图像放在 cytoscape js 中的节点边界上？
【发布时间】：2021-07-17 01:15:00
【问题描述】：

所以我正在使用 cytoscape js 并可视化图表。对于每个节点，我都有两个背景图像。一个在节点内，我希望另一个在节点的左下角。有点像这样：

Howevet 左下角的图像停留在节点的边框之下。但我希望它结束。在 Cytoscape js (https://js.cytoscape.org/#style/background-image) 的官方网站上说：

控制背景图像的绘制顺序（例如叠加背景图像超过边界），有必要指定 background-image-containment：结束（默认在里面）。

我认为这会解决我的问题。因此我的代码如下：

            'background-image':  ['img1.png', 'img2.png'],
            'background-image-containment': ['inside', 'over'],
            'background-width': ['100%', '30%'],
            'background-height': ['100%', '30%'],
            'background-position-x': ['0px', '-10px'],
            'background-position-y':['0px', '-3px'],
            'background-clip': ['node', 'none']

我也尝试过另一种格式：

'background-image':  ['img1.png', 'img2.png'],
        'background-width': '100% 30%',
        'background-height': '100% 30%',
        'background-position-x': '0px -10px',
        'background-position-y':'0px 3px',
        'background-clip': 'node none',
        'background-image-containment': 'inside over',
        'bounds-expansion': '10 10',

但这不起作用。图像仍位于节点边框下方。知道为什么吗？

【问题讨论】：

标签： javascript css cytoscape.js graph-visualization cytoscape

【解决方案1】：

可能'background-image-containment': 'inside over' 和'background-image-containment': ['inside', 'over'] 无效。如果是这种情况，您可能会看到来自开发者控制台的警告消息。消息类似于... is not a valid style

试试'background-image-containment': 'over'

【讨论】：