Установить фоновое изображение на всех слайдах (Quarto – Showjs)
Я работаю с Quarto (через RStudio) и работаю над презентацией на Showjs. Я хотел бы применить одно и то же фоновое изображение (из файла .png в том же каталоге, что и qmd) ко всем слайдам (без необходимости указывать его в заголовке каждого слайда).
Ближайший вопрос о переполнении стека — [этот][1]. Код, указанный в ответе, работает. Но когда я меняю эту строку:
background-image: url("https://i.imgur.com/8tcxHWh.jpeg");
к этому :
background-image: "Background.png";
т. е. попытка указать на локальный файл в том же каталоге, что и scss и qmd, не дает никакого эффекта (нет фонового изображения).
Кто-нибудь знает ответ на этот вопрос?
Не могли бы вы поделиться воспроизводимым кодом?
Я прошу прощения за то, что не был так ясен в первую очередь. Я отредактировал вопрос, чтобы сделать его более понятным, на основе примера кода, приведенного в вопросе, который вы также упомянули, @Julian.
Ответы 2
Я нашел довольно простое решение: просто включите его в YAML без использования scss:
---
title: "Title"
format:
revealjs:
background-image: Background.png
---
ВАЖНО: не работает на слайдах, где фон указан индивидуально, поэтому обязательно уберите {background-image = "image.jpg"} из заголовков второго уровня.
Мое предыдущее решение было не таким идеальным, поэтому я нашел другое. Я надеюсь, что когда-нибудь это поможет кому-нибудь.
Сначала я создал (или преобразовал) свое изображение в Inkscape и экспортировал его в SVG. Я использовал Inkscape, поскольку он создает красиво отформатированный SVG при открытии в текстовом редакторе.
После экспорта я открыл изображение в текстовом редакторе и изменил все параметры «ширина» и «высота» на % вместо пикселей (или любую другую единицу измерения конечного расстояния, которая у вас может быть). Для моего изображения SVG выглядел так:
<?xml version = "1.0" encoding = "UTF-8" standalone = "no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width = "100%"
height = "100%"
viewBox = "0 0 338.66666 190.5"
version = "1.1"
id = "svg1"
xmlns = "http://www.w3.org/2000/svg"
xmlns:svg = "http://www.w3.org/2000/svg">
<defs
id = "defs1" />
<g
id = "layer1">
<rect
style = "fill:#5ba500;fill-opacity:1;stroke-width:0.355287"
id = "rect1"
width = "100%"
height = "7.3%"
x = "0%"
y = "92.9%" />
<rect
style = "fill:#00716d;fill-opacity:1;stroke-width:0.287288"
id = "rect1-7"
width = "100%"
height = "4.7%"
x = "0%"
y = "95.5%" />
</g>
</svg>
Это позволяет в некоторой степени автоматически масштабировать фон (и особенно, он подходит под размер экрана в полноэкранном режиме).
вы пробовали ответ ?