2017-07-12 27 views
-1

我的PSD包含這樣的事情:不能Photoshop的透明度轉換爲CSS3

enter image description here

正如你可以看到這是一個簡單的背景,文本塊(顏色:#FFFFFF)。我的文字層上應用了3%的不透明度是這樣的:

enter image description here

當我試圖重現這個在CSS中,文本顏色是在瀏覽器中更黑暗,我不明白爲什麼:

enter image description here

這裏是CSS

.a-text { 
    color:  rgba(255, 255, 255, 0.03); 
    font-size: 200px; 
    font-family: "Lato Black"; 
} 

這不是一個顏色配置文件問題什麼的。正如你所看到的背景顏色完全一樣。這不是CSS規則衝突。我可能誤解了透明度有問題。

感謝您的幫助:)

+0

'0.03'幾乎看不見......爲什麼選擇這麼低的數字?無論如何, – vsync

+1

看起來不錯。這是一個品味的問題,而不是本網站的問題 – vsync

+1

這個項目的設計師工作了很多顏色不透明。他選擇一些基本顏色並應用許多不透明度。我覺得這很好,因爲我正在使用scss,我可以使用變暗或減輕基本顏色。這可能是一個糟糕的做法,我真的不知道...... – MarlburroW

回答

2

您的代碼看起來是正確的,我不認爲你誤解了什麼。當從圖形工具移動到代碼時,它很難完全完美地再現字體和效果/字體。你有什麼東西有點接近,你可能只是想增加一些不透明度。如果你需要你的圖形完美的不透明色調等我推薦使用SVG。

+0

Okey我得到了你,我認爲無論支持(Photoshop還是瀏覽器),不透明度值都具有「通用」渲染。我錯了。我只會提高CSS的不透明度,這對我來說會很好。 感謝您的幫助。 – MarlburroW

-1

您可能會嘗試CSS不透明度特性,理論上這應該會導致與rgba值相同的結果 - 但是誰知道。我懷疑結果因瀏覽器而異。不能在這裏測試。我也會選擇碰撞。

.a-text { 
    color:  white; 
    opacity:  .03; 
    font-size: 200px; 
    font-family: "Lato Black"; 
} 
+0

已經嘗試過了,結果完全一樣。 但是,這可能是由我的工作環境引起的,我正在開發一個基於Linux的操作系統,並在帶有藤蔓的Windows盒子中播放photoshop。我很想知道是否有人在Windows或MacOSX上有相同的結果。 – MarlburroW