網頁設計上有時需要在圖片背景上加字
若圖片色調與文字太像會導致文字出不來
這時候解決方法大概就是
- 文字加陰影或外框
- 背景圖片調成與文字顏色反差較大的色調
若使用第二種解決方案，會使用到 CSS的 background-blend-mode
至於 background-blend-mode 有哪些模式可以使用呢？
下面這篇文章提供了很全面的說明及示範
以後就不會在使用時知其然不知其所以然囉
CSS：background-blend-mode 背景混合模式
- 已編輯
可以參考這個範例:
字都選用白色, 而放上一張上方較淺而下方較深的圖來示意比較.
第一列的三張圖為將字放在上方淺色底區, 分別用
- 背景漸層由 #0000 (黑且透明) 至 #000f (黑不透明)
- 背景漸層由 #0000 (黑且透明) 至 #0008 (黑半透明)
- 無背景
第二列的三張圖為將字放在下方深色底區, 一樣用上面三種背景設定來呈現, 看看能不能達成你想要的效果.