Блог

Похоже, мы можем использовать несколько фоновых изображений, как показано ниже.

 {
  'background-image': [
    'https://upload.wikimedia.org/wikipedia/commons/b/b4/High_above_the_Cloud_the_Sun_Stays_the_Same.jpg',
    'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Pigeon_silhouette_4874.svg/1000px-Pigeon_silhouette_4874.svg.png'
  ],
  'background-fit': 'cover cover',
  'background-image-opacity': 0.5
}
 

В этом примере два изображения просто объединяются в одно изображение, так как оба имеют непрозрачность 0,5. Если я установлю непрозрачность 1, я увижу только одно изображение. Вместо этого я хочу показать их обоих друг на друге.

На изображении ниже вы можете видеть, что узел имеет круглое «изображение человека», а на другом круглом бело-синем изображении написано «5».

Могу ли я сделать это просто с помощью фонового изображения?

Спасибо!

Приведенные ниже стили могут помочь добавить несколько изображений на узел с cytoscape.js стили

   'background-fit': 'none',
  'background-image': [
    'https://upload.wikimedia.org/wikipedia/commons/b/b4/High_above_the_Cloud_the_Sun_Stays_the_Same.jpg',
    'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Pigeon_silhouette_4874.svg/1000px-Pigeon_silhouette_4874.svg.png'
  ],
  'background-image-opacity': 1,
  'background-width': '100% 30%',
  'background-height': '100% 30%',
  'background-position-x': '0% 85%',
  'background-position-y': '0% 10%'
 

Кроме того, динамическое создание SVG-изображения может использоваться для размещения нескольких изображений друг на друге