Перейти к содержанию

Подсказки: работа с фоном и текстом в sli.dev

Полноэкранное изображение на слайде

Базовая структура для слайда с фоновой картинкой:

<div class="absolute inset-0">
  <img src="/images/filename.webp" class="w-full h-full object-cover" />
</div>
<div class="content-over ...">
  <!-- контент слайда -->
</div>

content-over — класс с position: relative; z-index: 1, чтобы контент был поверх картинки.

Затемнение фона (overlay)

Если картинка слишком яркая и текст не читается — добавить bg-overlay между <img> и контентом:

<div class="absolute inset-0">
  <img src="/images/filename.webp" class="w-full h-full object-cover" />
  <div class="bg-overlay"></div>
</div>

bg-overlay — градиент rgba(10,10,12,0.8) → rgba(10,10,12,0.93). Затемняет картинку на 80–93%.

Когда убирать: если картинка сама по себе тёмная или хочется показать её без фильтра.

Выделение текста прямоугольником

Вместо затемнения всего фона — локальный полупрозрачный прямоугольник только под текстом:

<div style="background: rgba(10, 10, 12, 0.75); padding: 2em 3em; border: 1px solid var(--color-border);">

# Заголовок

## Подзаголовок

</div>

Параметры для подбора

Параметр Что делает Диапазон
rgba(10, 10, 12, X) Прозрачность фона прямоугольника 0.5 — лёгкая дымка, 0.75 — стандарт, 0.9 — почти непрозрачный
padding Отступы внутри прямоугольника 1em 2em — компактный, 2em 3em — просторный
border Рамка 1px solid var(--color-border) — тонкая, 1px solid var(--color-accent) — акцентная с зелёным
border-radius Скругление углов 0px — нуар-стиль, 8px — мягче
box-shadow Свечение var(--glow-accent) — зелёное свечение по краю

Комбинации

Минимальный — просто читаемость:

<div style="background: rgba(10, 10, 12, 0.6); padding: 1.5em 2em;">

Стандартный — читаемость + рамка:

<div style="background: rgba(10, 10, 12, 0.75); padding: 2em 3em; border: 1px solid var(--color-border);">

Акцентный — с зелёным свечением:

<div style="background: rgba(10, 10, 12, 0.8); padding: 2em 3em; border: 1px solid var(--color-accent); box-shadow: var(--glow-accent);">

Когда что использовать

  • Overlay на весь фон — когда текста много и он разбросан по слайду
  • Прямоугольник — когда текст компактный (заголовок + подзаголовок), а картинку хочется показать
  • Без overlay — когда картинка тёмная и текст контрастный сам по себе
  • Комбинация — overlay с пониженной прозрачностью (0.4–0.5) + прямоугольник под ключевым текстом

Рецепт: переход от overlay к прямоугольнику

Типичная ситуация: слайд с полноэкранной картинкой и overlay затемняет всё — картинка теряется. Хочется показать картинку, но текст должен читаться.

Шаги:

  1. Убрать <div class="bg-overlay"></div> из блока с картинкой
  2. Обернуть текстовый контент в <div> с полупрозрачным фоном:
<!-- ДО -->
<div class="absolute inset-0">
  <img src="/images/image.webp" class="w-full h-full object-cover" />
  <div class="bg-overlay"></div>          <!-- затемняет ВСЮ картинку -->
</div>
<div class="content-over flex flex-col items-center justify-center h-full text-center">

# Заголовок

Подзаголовок
</div>

<!-- ПОСЛЕ -->
<div class="absolute inset-0">
  <img src="/images/image.webp" class="w-full h-full object-cover" />
</div>
<div class="content-over flex flex-col items-center justify-center h-full text-center">
<div style="background: rgba(10, 10, 12, 0.75); padding: 2em 3em; border: 1px solid var(--color-border);">

# Заголовок

Подзаголовок
</div>
</div>

Результат: картинка видна по краям, текст читается на локальном тёмном фоне.

Подбор: если картинка светлая — увеличить opacity до 0.85. Если тёмная — можно снизить до 0.6.

Конвертация PNG → WebP

PNG-картинки тяжёлые (2–5 MB каждая). WebP даёт то же качество при ~3–5x меньшем размере. Для 20 слайдов разница — десятки мегабайт.

Установка cwebp

cwebp — часть пакета libwebp:

# macOS
brew install webp

# Ubuntu/Debian
sudo apt install webp

# Windows (любой из вариантов)
# 1. Скачать бинарники: https://developers.google.com/speed/webp/download
#    Распаковать, добавить папку bin/ в PATH
# 2. Через Chocolatey:
choco install webp
# 3. Через Scoop:
scoop install libwebp

Одна картинка

cwebp -q 85 images/01-courtroom-forge.png -o images/01-courtroom-forge.webp

-q 85 — качество (0–100). 85 — хороший баланс размера и качества. Для презентаций на проекторе разницы с 100 не видно.

Все картинки батчем

macOS / Linux (bash):

for f in images/*.png; do
  cwebp -q 85 "$f" -o "${f%.png}.webp"
done

Windows (PowerShell):

Get-ChildItem images\*.png | ForEach-Object {
  cwebp -q 85 $_.FullName -o ($_.FullName -replace '\.png$','.webp')
}

Windows (cmd):

for %f in (images\*.png) do cwebp -q 85 "%f" -o "%~dpnf.webp"

После конвертации

  1. Обновить slides.md — заменить .png на .webp во всех <img src="...">: # было <img src="/images/01-courtroom-forge.png" ...> # стало <img src="/images/01-courtroom-forge.webp" ...>

  2. Удалить исходные PNG (если больше не нужны): ```bash # macOS / Linux rm images/*.png

# Windows (PowerShell) Remove-Item images*.png ```

  1. Проверить, что dev-сервер показывает картинки корректно

Когда НЕ конвертировать

  • Если картинки ещё будут редактироваться — держи PNG как исходники в images-orig/
  • Для PDF-экспорта — slidev одинаково работает с PNG и WebP