在本文中，我們將探索一種將黑色(#000) 轉換為顏色的方法僅使用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>高效輕量，適合動態色彩變化或動畫。
結論利用CSS 濾鏡，我們可以無縫地將黑色轉換為任何給定的顏色，僅透過CSS 即可實現多種設計可能性和動態顏色操作。提供的 JavaScript 函數簡化了流程，讓您可以輕鬆地將這些轉換應用到您的專案中。以上是如何使用 CSS 濾鏡將黑色轉換為任何顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
