如何在 html 中的循环中制作具有彩虹颜色的按钮？
发布于2024-11-25 11:54 阅读(1016) 评论(0) 点赞(3) 收藏(2)
我的项目是基于jango框架制作的。
{% for tag in tags %}
<div class="btngroup" role="group" aria-label="tags">
<h3><a href="{{ tag.get_absolute_url }}" class="btn btn-primary">{{tag.title}}</a></h3>
</div>
{% endfor %}
我稍微解释一下。在这个循环中，我从数据库中获取链接标签，我想将其包装在彩虹的不同颜色的按钮中。但是该怎么做呢？
解决方案
您可以使用 HSL 轻松根据项目索引和数组中的项目总数创建颜色。H 代表色调，范围从 0 到 360。0 为红色，120 为绿色，240 为蓝色。您可以根据循环中项目的索引简单地计算 360 的百分比。
因此，首先，您需要创建一个过滤器，因为您无法直接在 Django 模板中进行计算。创建一个名为的文件夹，templatetags其中包含两个文件：一个为空__init__.py，另一个rainbow.py包含以下内容：
from django import template
register = template.Library()
@register.filter()
def rainbow(i, array):
return 360 * i / len(array)
然后，像这样修改代码，以便使用 CSS 更改背景，定义 HSL 颜色。确保包含过滤器：
{% load rainbow %}
{% for tag in tags %}
<div class="btngroup" role="group" aria-label="tags">
<h3>
<a href="{{ tag.get_absolute_url }}" style="background:hsl({{ forloop.counter|rainbow:tags }},80%,50%)" class="btn btn-primary">{{tag.title}}</a>
</h3>
</div>
{% endfor %}
forloop.counter在 Django 中将获取循环中当前项目的索引。80% 代表 S（饱和度），50% 代表 L（亮度）。您可能需要对其进行微调以匹配您的设计。
实例： https: //repl.it/repls/AbleOtherBytecode
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/535984/e7b25697a24340db346f/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力