CSS 필터를 사용하여 검정색을 모든 색상으로 변환하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

CSS 필터를 사용하여 검정색을 모든 색상으로 변환하는 방법은 무엇입니까?

DDD

풀어 주다： 2024-10-19 14:02:02

원래의

235명이 탐색했습니다.

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>

로그인 후 복사