背景感知文本顏色

Question

我有一個響應式網站，它有一個動態大小的背景圖像，有一些黑暗和明亮的區域。在瀏覽器中，字體顏色被調整爲與背景圖像的顏色具有良好的對比度。

不幸的是，在響應式（移動）設計中，某些文本分層疊加在重新調整大小的背景圖像的較暗部分，文本可能非常難以閱讀。有誰知道一個jQuery插件或技術的文本可以讓它知道背後的背景，並相應地改變風格/顏色？

Answer 1

您可以使用文字陰影來標記文字的邊緣。

body { 
/* your rules */ 
color: rgba(0 , 0, 0, 0.8); /* just a guess that it might be black;*/ 
text-shadow: 
    0 0 1px gold, 
    0 0 3px white; /* choose how many and which colors */ 
} 

這是想法

Answer 2

你問什麼就基本意味着這個：

• 文本分配每個字從頂部<span>
• 使用％的位置被包裹/留在圖片所在的位置，並動態分配顏色以跨越該區域。

缺少一個更好的詞，不要。這很荒謬，而且合理化的開銷太多了。

爲什麼不直接給文本的容器提供一個半透明的背景，以便它更突出？

.Container { 
    background-color:rgba(0,0,0,0.5); 
} 

這提供了一個淺色調的文本彈出圖像，同時仍然讓整個圖像顯示在頁面上。

文字 - 陰影解決方案也是一個好主意，但只是一個提醒，它不會在IE9上工作。我的解決方案可以在IE9上運行，但不能在IE8上運行，這並不意味着它更好，而只是需要記住。