如何在 CSS 中為具有透明度的背景圖像添加色調

Question

我在用作全局背景的頁面上有一些內容。 我使用position: absolute在其之上放置了一個 sprite（ div with background-image: url(...) ，通過修改background-position來改變幀）。 精靈是一個帶有 alpha 通道的 PNG。

現在我正在嘗試為該圖像添加一些色調（綠色或藍色或其他）。

我研究了類似的問題，顯然唯一可能的解決方案是：

在精靈頂部創建一個div ，將所需顏色作為background-color ，將所需着色強度作為opacity ，並將原始精靈圖像作為mask-image （並設置mask-type: alpha ）。 雖然它應該在紙面上工作，但實際上並沒有——這個新的div只是不可見的:(
對覆蓋的彩色div使用mix-blend-mode並指定諸如multiply或overlay之類的東西。 只要全局背景為黑色，它就會產生完美的結果。 如果它是其他東西 - 它被包含在計算中並且覆蓋div也會修改它，產生一個有色矩形而不是有色精靈......
按照此處的答案中的說明使用 SVG 過濾器： https://stackoverflow.com/a/30949302/306470 。 我還沒有嘗試過這個，但是對於這個任務來說感覺不必要的復雜。 我也很關心這里的性能，如果屏幕上同時出現多個有色精靈，它會減慢速度嗎？ 如果有人對此有經驗-請在此處發表評論:)
使用不可見的canvas准備着色版本的精靈。 聽起來更復雜，缺點是必須花時間准備有色版本的精靈，但一旦准備好，它應該和原始精靈一樣快嗎？ 雖然實施應該非常復雜。 純 CSS 解決方案會好得多......

我錯過了什么嗎？ 還有其他選擇嗎？ 或者我應該使用#3 或#4 go？

Answer 1

這是我留下的概述評論的一個工作示例，希望它有所幫助。 我使用創建的 div 元素覆蓋在圖像之上。 在遍歷圖像元素的 for 循環中使用 boundingClientRect 和 this.width/this.height 獲取圖像元素 position。 將覆蓋元素 position 設置為正在循環的圖像元素的元素，並使用 function 將顏色隨機化，其中 rgb 將 alpha 設置為 0.5。

 let fgrp = document.getElementById("group"); let images = document.querySelectorAll(".imgs"); //function to randomize the RGB overlay color function random() { var o = Math.round, r = Math.random, s = 255; return o(r() * s); } //function to randomize a margin for each image to show the overlay will snap to the image function randomWidth() { var n = Math.round, ran = Math.random, max = 400; return n(ran() * max); } // loop through the img elements and create an overlay div element for each img element for (let i = 0; i < images.length; i++) { // load the images and get their wisth and height images[i].onload = function() { let width = this.width; let height = this.height; this.style.marginLeft = randomWidth() + "px"; // create the overlay element let overlay = document.createElement("DIV"); // append the overlay element fgrp.append(overlay); // get the image elements top, left positions using `getBoundingClientRect()` let rect = this.getBoundingClientRect(); // set the css for the overlay using the images height, width, left and top positions // set position to absolute incase scrolling page, zindex to 2 overlay.style.cssText = "width: " + this.offsetWidth + "px; height: " + this.offsetHeight + "px; background-color: rgba(" + random() + ", " + random() + ", " + random() + ", 0.5); left: " + rect.left + "px; top: " + rect.top + "px; position: absolute; display: block; z-index: 2; cursor pointer;"; } }

 img { margin: 50px 0; display: block; }

 <div id="group"> <image src="https://artbreeder.b-cdn.net/imgs/275c7c05efca3a40e3178208.jpeg?width=256" class="imgs"></image> <image src="https://artbreeder.b-cdn.net/imgs/275c7c05efca3a40e3178208.jpeg?width=256" class="imgs"></image> <image src="https://artbreeder.b-cdn.net/imgs/275c7c05efca3a40e3178208.jpeg?width=256" class="imgs"></image> </div>

Answer 2

按照下面的指南，僅使用 CSS 就可以在 div/圖像上塗上彩色，如下所示：

<html>

<head>
    <style>
        .hero-image {
            position: relative;
            width: 100%;
        }

        .hero-image:after {
            position: absolute;
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, .5);
            top: 0;
            left: 0;
            display: block;
            content: "";
        }
    </style>
</head>

<body>
    <div class="hero-image">
        <img src="https://cdn.jpegmini.com/user/images/slider_puffin_before_mobile.jpg" alt="after tint" />
    </div>
    <div>
        <img src="https://cdn.jpegmini.com/user/images/slider_puffin_before_mobile.jpg" alt="before tint" />
    </div>
</body>

</html>

由於您正嘗試將其放置在絕對 position 圖像之上，如指南所述，請將 z-index 1（例如）添加到 :after 塊。

編輯：可能需要對寬度的百分比進行一些調整！

來源： https://ideabasekent.com/wiki/adding-image-overlay-tint-using-css

如何在 CSS 中為具有透明度的背景圖像添加色調

問題描述

2 個解決方案

解決方案1
0 2020-11-14 18:29:10

解決方案2
0 2020-11-14 19:08:20

如何在 CSS 中為具有透明度的背景圖像添加色調

問題描述

2 個解決方案

解決方案1 0 2020-11-14 18:29:10

解決方案2 0 2020-11-14 19:08:20

解決方案1
0 2020-11-14 18:29:10

解決方案2
0 2020-11-14 19:08:20