0

我正在尝试在 Tailwind 或纯 CSS 上制作类似的东西......

能量棒

所以基本上我们可以在元素之间共享一些类似这样的 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>

问题是“背景附件：固定”是相对于视口而不是容器元素。所以为了看到完整的色阶，我必须最大化浏览器。

这个或任何与容器相关但与视口无关的背景附件有什么技巧吗？

4

0 回答 0