CSS線性不透明

我想創建一些平面UI類似的塊，但我需要一點幫助。我通過一些帶線性漸變的指南（向左，rgba（255,255,255,0），rgba（255,255,255,1））;等等，但我沒有找到我真正需要的東西。CSS線性不透明

有沒有辦法，如何做任何與線性不透明層？我有相當大的圖像數據庫，（所以我絕對不能photoshop它們本身具有不透明性），並且我將它作爲背景圖像加載到許多「div」中。但我需要讓div開始在約75％的寬度上透明。

這是在CSS中的某種可能嗎？

還有就是我需要實現：

來源

2015-12-11 Zorak

我害怕這樣的事情是不可能的使用CSS。既然你有許多圖像，只要你不表現出太多的一次，你可以考慮使用canvas的不透明度渲染到每一個圖像：

http://jsfiddle.net/u256zkha/

來源

2015-12-12 00:04:25 Shomz

好吧，我會接受你的答案作爲解決方案，也許這對其他人來說是有用的，但是......正如我在主帖中所說的，我有很多這樣的東西。這是一個圖像庫 - 從畫廊標記爲最喜歡的圖像，具體。用戶可以有很多這樣的..所以，即使圖片大拇指只有大約300x300像素，這「循環」我不喜歡這裏非常。無論如何，感謝您的幫助和時間:) – Zorak

是的，是的，我知道這是無關緊要的，可以用很多圖片表現糟糕，但這是我能想到的唯一方法。當在畫布上進行任何形式的圖像處理時，循環是一個標準，並且它本身很好，但正如我所說，問題可能隨着圖像數量的增加而出現。別客氣！ :) – Shomz

您可以設置一個線性漸變的背景，一個額外的停止，使透明的寬度的75％的元素，然後線性增加透明度。

例如：

background: linear-gradient(
    to right, 
    rgba(0,0,0,1) 0%, 
    rgba(0,0,0,1) 75%, 
    rgba(0,0,0,0) 100% 
);

這使得一個元件具有不透明黑（三個第一，RGBA值）爲背景的寬度的75％，然後線性在其最右邊的25％轉變爲透明的。

來源

2015-12-11 22:58:48 Jon

但是，這不會對圖像的工作。 – Shomz

@Shomz：問題是「讓div開始透明」，所以我不確定這會是一個問題。在任何情況下，將圖片或其他任何東西包裝在額外的div中並使用div都是微不足道的。 – Jon

是的，我已經試過了... style = \「background-image：linear-gradient（to right，rgba（0,0,0,1）0％，rgba（0,0,0,0）75 ％），url（「+ item.header.thumb +」）; \和style = \「background-image：url（」+ item.header.thumb +「），線性漸變（向右，rgba（0,0， 0,1）0％，rgba（0,0,0,0）75％）; \「兩者都不起作用。正如我所說的，我已經試圖谷歌它，打擾別人是一種選擇，只有在計劃一個失敗:)（忽略斜線，它來自Javascript） – Zorak

CSS線性不透明

回答

相關問題