Обмен фоновым изображением между элементами с использованием CSS или TailwindCSS - PullRequest
Новая
       43

Обмен фоновым изображением между элементами с использованием CSS или TailwindCSS

0 голосов
/ 26 мая 2019

Я пытаюсь сделать что-то подобное на Tailwind или чистом CSS ...

Power Bar

Таким образом, в принципе, мы могли бы разделить некоторый фон между элементами с некоторым css, подобным этому (мы используем этот класс для каждого элемента): 

.item {
    background-image: linear-gradient(to right, red, blue);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
и это HTML, значение div не должно иметь значения, важно отобразить полную градиентную шкалу ... 
            <div class="w-full mb-4 ">
                <div class="flex flex-row" >
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1" ></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1" ></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>                        
                </div>
            </div>

Проблема в том, что "background-attachment: fixed" относится к области просмотра, а не к элементу контейнера. Поэтому, чтобы увидеть полную цветовую шкалу, мне нужно развернуть браузер.

Есть ли хитрость для этого или любого фонового вложения, относящегося к контейнеру, но не к области просмотра?

...