cross-fade() в CSS — змішування двох зображень у фоні

Опис

автор: Bond

Загальний опис

автор: NagarD

Порада

Використовуйте зображення зі схожими розмірами та відносно однаковою пропорцією, щоб отримати кращий ефект перехресного змішування.

автор: Bond
Порада

Експериментуйте з різними значеннями percentage, щоб контролювати ступінь перехресного змішування зображень.

автор: Bond
Порада

Переконайтеся, що зображення мають прозорий фон або використовуйте прозорість альфа-каналу для досягнення кращих результатів.

автор: Bond
Нотатка

cross-fade() - це корисний інструмент для створення анімаційних переходів між зображеннями, що додає веб-сайту вишуканість та привабливість. Цей метод дозволяє вам підкреслити важливі моменти, розповісти історію або виділити вміст на веб-сторінці.

автор: Bond

Синтаксис

cross-fade( <image> , <image> [, <percentage> ]);

Функція cross-fade може отримувати 2 значень:

<image>

Зображення, яке буде перехресно змішане (cross-faded). Вказується за допомогою URL-адреси зображення.

автор: Bond

<percentage>

Опціональне значення від 0% до 100%, що вказує на прозорість перехресного змішування зображень. За замовчуванням - 100% (повна видимість першого зображення).

автор: Bond

Переглядачі

Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
17* — 10 15* 79* —
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
4.4* 18* — 9.3

Приклади

+ запропонувати свій приклад у пісочниці

HTML

<div id="description">
  <h2>Приклад 1: зміна елемента за допомогою cross-fade()</h2>
  <p>Наведіть курсор на елемент, щоб побачити зміну.</p>
</div>

<div id="result">
  <div class="image-container">
    <div class="image crossfade"></div>
  </div>
</div>

CSS

#description {
  background-color: #f2f2f2;
  padding: 20px;
  font-family: Arial, sans-serif;
}

#result {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.image-container {
  position: relative;
}

.image {
  width: 300px;
  height: 300px;
  background-size: cover;
  background-position: center;
}

.crossfade {
  background-image: -webkit-cross-fade(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%238a4b0f'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%23c96f1e'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23f4a259'/%3E%3C/svg%3E"), 50%);
  background-image: cross-fade(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%238a4b0f'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%23c96f1e'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23f4a259'/%3E%3C/svg%3E"), 50%);
  transition: background-image 0.3s ease;
}

.crossfade:hover {
  background-image: -webkit-cross-fade(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%238a4b0f'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%23c96f1e'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23f4a259'/%3E%3C/svg%3E"), 0%);
  background-image: cross-fade(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%238a4b0f'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%23c96f1e'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23f4a259'/%3E%3C/svg%3E"), 0%);
}
автор: Bond

HTML

<div id="description">
  <h2>Приклад 2: елементи з різними фоновими зображеннями</h2>
  <p>Один елемент використовує функцію cross-fade() для зміни фонового зображення.</p>
</div>

<div id="result">
  <div class="image-container">
    <div class="image"></div>
    <div class="image crossfade"></div>
  </div>
</div>

CSS

#description {
  background-color: #f2f2f2;
  padding: 20px;
  font-family: Arial, sans-serif;
}

#result {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.image-container {
  display: flex;
}

.image {
  width: 300px;
  height: 300px;
  margin-right: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
}

.crossfade {
  background-image: -webkit-cross-fade(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%238a4b0f'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%23c96f1e'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23f4a259'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E"), 75%);
  background-image: cross-fade(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%238a4b0f'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%23c96f1e'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23f4a259'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E"), 75%);
}
автор: Bond

Перша коробка — cross-fade() у новому записі, друга — у застарілому, третя — з префіксом -webkit-: у Firefox усі три порожні, бо оголошення відкинуто. Четверта показує запасний варіант каскадом: простий фон рядком вище лишається на місці. Далі — той самий ефект, зроблений двома шарами з прозорістю; наведіть на нього, щоб частка змінилась плавно.

HTML

<div class="grid">
    <figure>
        <div class="box cf-new"></div>
        <figcaption>cross-fade(A 50%, B) — новий запис</figcaption>
    </figure>

    <figure>
        <div class="box cf-old"></div>
        <figcaption>cross-fade(A, B, 50%) — застарілий запис</figcaption>
    </figure>

    <figure>
        <div class="box cf-webkit"></div>
        <figcaption>-webkit-cross-fade(A, B, 50%) — префіксний</figcaption>
    </figure>

    <figure>
        <div class="box cf-fallback"></div>
        <figcaption>запасний фон рядком вище — коробка не порожня</figcaption>
    </figure>
</div>

<p class="head">А ось робоча заміна: два шари, у верхнього opacity. Наведіть —
    частка змінюється плавно, чого cross-fade не вміє:</p>
<div class="grid">
    <figure>
        <div class="stack o0"><span class="top"></span></div>
        <figcaption>0% — видно лише нижній шар</figcaption>
    </figure>

    <figure>
        <div class="stack o50"><span class="top"></span></div>
        <figcaption>50% — рівна суміш</figcaption>
    </figure>

    <figure>
        <div class="stack o100"><span class="top"></span></div>
        <figcaption>100% — видно лише верхній шар</figcaption>
    </figure>

    <figure>
        <div class="stack live"><span class="top"></span></div>
        <figcaption>наведіть: перехід від 0% до 100%</figcaption>
    </figure>
</div>

CSS

.head {
    margin: 20px 0 8px;
    max-width: 560px;
    color: #5a6472;
    font-size: .9em;
}

.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

figure {
    margin: 0;
    width: 160px;
}

figcaption {
    margin-top: 6px;
    color: #5a6472;
    font: 12px/1.35 ui-monospace, monospace;
}

.box,
.stack {
    position: relative;
    width: 160px;
    height: 110px;
    border: 1px dashed #b9c6d8;
}

.cf-new {
    background-image: cross-fade(
        linear-gradient(135deg, #c0392b, #f2b134) 50%,
        linear-gradient(135deg, #2f6fd0, #3a9a4f));
}

.cf-old {
    background-image: cross-fade(
        linear-gradient(135deg, #c0392b, #f2b134),
        linear-gradient(135deg, #2f6fd0, #3a9a4f), 50%);
}

.cf-webkit {
    background-image: -webkit-cross-fade(
        linear-gradient(135deg, #c0392b, #f2b134),
        linear-gradient(135deg, #2f6fd0, #3a9a4f), 50%);
}

.cf-fallback {
    background-image: linear-gradient(135deg, #c0392b, #f2b134);
    background-image: cross-fade(
        linear-gradient(135deg, #c0392b, #f2b134) 50%,
        linear-gradient(135deg, #2f6fd0, #3a9a4f));
}

.stack {
    background-image: linear-gradient(135deg, #c0392b, #f2b134);
    border-style: solid;
}

.top {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(135deg, #2f6fd0, #3a9a4f);
}

.o0 .top { opacity: 0; }
.o50 .top { opacity: .5; }
.o100 .top { opacity: 1; }

.live .top {
    opacity: 0;
    transition: opacity .6s ease;
}

.live:hover .top {
    opacity: 1;
}
автор: NagarD

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~		 Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень		 Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
[[!sandbox/S0oh1hBm]] Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком !: наберіть [[! і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```		 Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження		 Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox		 Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає		 Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.		 Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||		 Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Правка
Зворотний зв'язок
Вхід