如何使用 CSS 滤镜将黑色转换为任何颜色？-js教程-PHP中文网

如何使用 CSS 滤镜将黑色转换为任何颜色？

DDD

发布： 2024-10-19 14:02:02

原创

233 人浏览过

How Can CSS Filters Be Used to Transform Black into Any Color?

如何仅使用 CSS 滤镜将黑色转换为任何给定颜色

在本文中，我们将探索一种将黑色 (#000) 转换为颜色的方法仅使用 CSS 过滤器即可获得任何所需的颜色。此转换涉及对黑色进行一系列计算，从而产生目标颜色，而不影响图像或元素中存在的其他颜色。

CSS 过滤器转换函数

<code class="js">function transformBlack(targetColor) {
  // Convert target color to HSL
  const targetHSL = ... // Implement HSL conversion here

  // Calculate filter values using SPSA algorithm
  const filterValues = ... // Implement SPSA algorithm here

  // Construct CSS filter string
  const filterString = "invert(" + filterValues[0] + "%) " +
                      "sepia(" + filterValues[1] + "%) " +
                      "saturate(" + filterValues[2] + "%) " +
                      "hue-rotate(" + filterValues[3] + "deg) " +
                      "brightness(" + filterValues[4] + "%) " +
                      "contrast(" + filterValues[5] + "%)";

  return filterString;
}</code>

登录后复制

实现和示例

<code class="html"><p>Real pixel, color applied through CSS <code>background-color</code>:</p>
<div class="pixel realPixel" style="background-color: #000"></div>

<p>Filtered pixel, color applied through CSS <code>filter</code>:</p>
<div class="pixel filterPixel" style="filter: invert(100%) sepia() saturate(10000%) hue-rotate(0deg) brightness(100%) contrast(100%);"></div>

<p class="filterDetail"></p>
<p class="lossDetail"></p></code>

登录后复制

<code class="js">const targetColor = ... // User-provided target color

const filterString = transformBlack(targetColor);
const filterPixel = document.querySelector(".filterPixel");
filterPixel.style.filter = filterString;

const filterDetail = document.querySelector(".filterDetail");
filterDetail.innerHTML = filterString;</code>

登录后复制