Multiply colorful background 2

by yiiBoy

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Базовые стили для слова */
        .word {
            display: inline-block; /* Блочное отображение внутри строки */
            padding: 10px 15px; /* Отступы вокруг текста */
            color: white; /* Цвет текста */
            font-weight: bold; /* Жирный текст */
            border-radius: 5px; /* Закругленные углы */
            margin: 10px; /* Отступы между словами */
            position: relative; /* Для позиционирования динамического фона */
        }

        /* Цветовые классы */
        .color-blue { --color: #2196f3; }
        .color-red { --color: #ff0000; }
        .color-green { --color: #4caf50; }
        .color-yellow { --color: #ffeb3b; }
        .color-purple { --color: #9c27b0; }
    </style>
</head>
<body>

<p>Пример текста с динамическим полосатым фоном в зависимости от указанных цветов:</p>

<p>
    <span class="word color-blue color-red">Слово1</span> <!-- Полосатый фон с двумя цветами -->
    <span class="word color-green color-yellow color-purple">Слово2</span> <!-- Полосатый фон с тремя цветами -->
    <span class="word color-blue color-green">Слово3</span> <!-- Полосатый фон с двумя другими цветами -->
    <span class="word color-red color-yellow color-blue">Слово4</span> <!-- Полосатый фон с тремя другими цветами -->
</p>

<script>
    // Функция для генерации полосатого фона
    function generateStripedBackground(element) {
        const colors = Array.from(element.classList)  // Получаем классы элемента
            .filter(className => className.startsWith('color-'))  // Фильтруем только цветовые классы
            .map(className => getComputedStyle(element).getPropertyValue('--color').trim());  // Получаем значение цвета

        if (colors.length > 1) {  // Только если есть более одного цвета
            const stripeWidth = 100 / colors.length;  // Ширина полос...