css 通过将颜色转换为RGBA来更改背景色的不透明度

2fjabf4q 于 2023-04-13 发布在其他

关注(0)|答案(1)|浏览(137)

我正在使用Jekyll主题just-the-docs。
我已经定义了一个新的自定义标注类，并希望更改背景颜色的不透明度。这是我提出的代码，它不起作用：
custom-callout.html文件：

{% assign callout_type = include.callout %}
{% assign callout_color = site.callouts[callout_type].color %}
{% assign callout_title = site.callouts[callout_type].title %}
{%- assign callout_opacity = 0.2 -%}
{% assign background_color=rgba(${{ callout_color }}, {{ callout_opacity }}); %}

<div class="custom-callout" style="background-color: {{ background_color}}; border-left: 4px solid {{ callout_color }}; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); padding: 0.8rem; margin-bottom: 1.5rem;">
  <strong class="custom-callout-title" style="color: {{ callout_color }}; display: block; font-weight: bold; margin-top: 0; margin-bottom: 0.5rem;">{{ callout_title }}</strong>
  {{ include.content | markdownify }}
  {% if include.collapsible_content %}
    <details>
      <summary>{{ include.summary }}</summary>
      {{ include.collapsible_content | markdownify }}
    </details>
  {% endif %}
</div>

_config.yml文件中的标注定义

callouts:
  error:
    title: Error
    color: red

注意：如果我把线改了

{% assign background_color=rgba(${{ callout_color }}, {{ callout_opacity }}); %}

到

{% assign background_color=callout_color; %}

这一切都工作正常，但显然没有应用不透明度。似乎很明显，问题是转换颜色到rgba，以应用不透明度参数。我还尝试了其他函数，如fade，这也不起作用。

css

来源：https://stackoverflow.com/questions/75975175/changing-the-opacity-of-the-background-color-by-converting-the-color-to-rgba

1条答案

按热度按时间

lg40wkob1#

`color-mix()`

您可以使用color-mix()，如下所示：

{%- assign callout_opacity = '20%' -%}
<div class="custom-callout" style="background-color: color-mix(in srgb, {{ callout_color }}, transparent {{ callout_opacity }});

但是，请注意，浏览器支持是不稳定的，Firefox中没有支持。

关键字到RGB分量Map

为每个HTML颜色关键字定义某种类型的对象Map，您可以使用该Map将关键字转换为其RGB分量等效项：

{
  "red": "255 0 0",
  "blue": "0 0 255",
  …
}

然后使用callout_color作为该Map的键，从而将其作为rgb_map变量注入模板：

{% assign callout_opacity = '0.2' %}
<div class="custom-callout" style="background-color: rgb({{ rgb_map[callout_color] }} / {{ callout_opacity }});

如果你知道只有一个关键字子集会被使用，你可以尝试一组if或case/when语句：

{% case callout_color %}
  {% when 'red' %}
    {% assign rgb_color = '255 0 0' %}
  {% when 'blue' %}
    {% assign rgb_color = '0 0 255' %}
  …
{% endcase %}
{% assign callout_opacity = '0.2' %}

<div class="custom-callout" style="background-color: rgb({{ rgb_color }} / {{ callout_opacity }});

赞(0）回复(0）举报 2023-04-13

我来回答

css 通过将颜色转换为RGBA来更改背景色的不透明度

1条答案

`color-mix()`

关键字到RGB分量Map

相关问题

热门标签

最新问答