深夜12點，頭禿的那傢伙，還在用 CSS 處理圖片上的文字

做者：Ahmad shaded
譯者：前端小智
來源：sitepoint

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

作項目過程當中，咱們可能會遇到這樣的一個組件，該組件的圖像上方是文本。 在某些狀況下，根據所使用的圖像，文字難以閱讀，如文字是白色的，背景圖偏淺。

這種狀況有一些不一樣的解決方案，例如添加漸變疊加或着色的背景圖像，文本陰影等。

簡介

每一個解決方案都應該解決一個問題。 咱們來探討本案的問題。 在設計圖像上方有文字的組件時，咱們須要注意使文字必須易於閱讀的。

注意上圖上，沒有漸變覆蓋的版本幾乎不可讀，這是對用戶不利。 爲了解決這個問題，咱們須要在文本下方添加一個圖層，便於閱讀。 添加圖層也有要注意的地方。由於，不少解決方案中沒有考慮到可訪問性。

多種解決方案

有多種解決方案可使文本更易於閱讀。 咱們逐一看看。

如上圖所示，針對此問題有不一樣的解決方案。 須要注意的是漸變的解決方案。 爲何？ 由於這種方案容易讓文本失去能夠訪問性。

解決方案

The Gradient Overlay(漸變疊加)

通常而言，漸變疊加是讓圖像上的文字更加清晰的最多見解決方案，因此，咱們重點來看看。

實現漸變疊加時，有兩種方式：

1. 使用單獨的元素進行漸變（僞元素或空的<div>）
2. 應用漸變做爲背景圖像。

以上每一種方法都有其優勢和缺點，咱們一塊兒來看看。

.card__content {
  position: absolute;
  /* other styles (left, top, right, and padding) */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

乍一看，你可能會認爲漸變效果很好，這是不夠全面的。若是用更多樣的圖片測試了一樣的漸變效果，結果以下：

白色文本和圖像之間的對比度並不老是很清晰。 對於某些人來講，能夠接受，可是使用這種漸變是一個巨大的錯誤，由於文字沒法訪問。

緣由是該漸變在垂直方向上應覆蓋更多的空間，所以它的高度須要更大。 漸變等於內容的大小在全部狀況下都沒法使用。 爲了解決這個問題，咱們可使用min-height，以下所示：

• .card__content元素的min-height。
• Flexbox 將內容推到底部。

.card__content {
  position: absolute;
  /* other styles (left, top, right, and padding) */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

另外一種解決方案是僅使用padding-top 來代替min-height和flexbox。

.card__content {
  position: absolute;
  padding-top: 60px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

請注意左卡和右卡之間的差別，漸變高度較大。

那看起來不錯，咱們能夠作得更好嗎？ 固然是！

緩漸變

若是仔細觀察，咱們會發現漸變結束的地方很突兀，這家就是所謂的硬邊現象。

爲了使它更好，咱們能夠將緩動概念應用於漸變。 這樣一來，漸變將顯得更加天然，而且在漸變結束時也不會注意到硬邊。

在CSS中，咱們須要有多個漸變中止點來實現緩動，由於在撰寫本文時尚未原生的方法能夠作到這一點。 好消息是CSS工做組正在討論在CSS漸變中實施緩動的可能性，但什麼時候實現尚不明確。

值得慶幸的是，Andreas Larsen先生建立了一個方便的PostCSS和Sketch插件，可將正常漸變轉換爲簡化的漸變。

這是上面例子的CSS漸變：

.card__content {
  background-image: linear-gradient(
    0deg,
    hsla(0, 0%, 35.29%, 0) 0%,
    hsla(0, 0%, 34.53%, 0.034375) 16.36%,
    hsla(0, 0%, 32.42%, 0.125) 33.34%,
    hsla(0, 0%, 29.18%, 0.253125) 50.1%,
    hsla(0, 0%, 24.96%, 0.4) 65.75%,
    hsla(0, 0%, 19.85%, 0.546875) 79.43%,
    hsla(0, 0%, 13.95%, 0.675) 90.28%,
    hsla(0, 0%, 7.32%, 0.765625) 97.43%,
    hsla(0, 0%, 0%, 0.8) 100%
  );
}

水平漸變

處理圖片上的文字不只能夠是垂直的，咱們還能夠將它們用做水平漸變。 像下面這種狀況，它須要一個水平漸變。

![上傳中...]()

這是上面的CSS漸變,我使用了前面提到的工具來生成緩和的漸變。

background: linear-gradient(
  to right,
  hsl(0, 0%, 0%) 0%,
  hsla(0, 0%, 0%, 0.964) 7.4%,
  hsla(0, 0%, 0%, 0.918) 15.3%,
  hsla(0, 0%, 0%, 0.862) 23.4%,
  hsla(0, 0%, 0%, 0.799) 31.6%,
  hsla(0, 0%, 0%, 0.73) 39.9%,
  hsla(0, 0%, 0%, 0.655) 48.2%,
  hsla(0, 0%, 0%, 0.577) 56.2%,
  hsla(0, 0%, 0%, 0.497) 64%,
  hsla(0, 0%, 0%, 0.417) 71.3%,
  hsla(0, 0%, 0%, 0.337) 78.1%,
  hsla(0, 0%, 0%, 0.259) 84.2%,
  hsla(0, 0%, 0%, 0.186) 89.6%,
  hsla(0, 0%, 0%, 0.117) 94.1%,
  hsla(0, 0%, 0%, 0.054) 97.6%,
  hsla(0, 0%, 0%, 0) 100%
);

混合純色和漸變

這裏從Netflix網站了解了這種模式。 在未登陸用戶的主頁上，有一個帶有大背景圖像的標題。

我喜歡它，可是它隱藏了不少圖像細節。 確保僅在圖像具備裝飾性時才使用此功能。

<div class="hero">
  <img src="cover.jpg" alt="" />
  <div class="hero__content">
    <h2>Unlimited movies, TV shows, and more.</h2>
    <p>Watch anywhere. Cancel anytime.</p>
  </div>
</div>```
<div class="hero">
  <img src="cover.jpg" alt="" />
  <div class="hero__content">
    <h2>Unlimited movies, TV shows, and more.</h2>
    <p>Watch anywhere. Cancel anytime.</p>
  </div>
</div>

.hero:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8),
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

下面是拆解過程。

漸變疊加和文本陰影

有一個頗有用的小技巧，可讓文字比圖像更好。就是使用 text-shadow，這可能不容易注意到，但在圖像沒法加載的狀況下，這是很是有用的。

看下面的例子：

.whatever-text {
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

漸變疊加，文本陰影和不透明度

這是在Facebook的視頻播放器上注意到的模式。 他們使用多種技術來使文本（和其餘UI元素）清晰可見。 與視頻播放器打交道時，確保其上方的元素應引人注目很是重要。

.player__icon {
  opacity: 0.9;
}

.player__time {
  color: #fff;
  text-shadow: 0 0 5px #fff;
}

播放圖標爲opacity: 0.9。 這有助於使它們與下面的背景融爲一體。 給人一種感受：控件是混合在一塊兒的。

此外，在白色文本中使用白色文本陰影是使文本更清晰的有效方法。你是否想要證實，即便背景是徹底白色的圖像，上面的方法也能夠工做?給你。

YouTube也對他們的視頻作相似的事情。

徑向漸變

我從Netflix瞭解到的一個有趣的解決方案是使用徑向漸變。 下面是它的工做原理：

1.設置底色背景顏色。

1. 將圖像以75%的寬度放置到右上角。
2. 覆蓋層等於圖像的大小和位置。

.hero {
  background-color: #000;
  min-height: 300px;
}

.hero__image {
  position: absolute;
  right: 0;
  top: 0;
  width: 75%;
  height: 100%;
  object-fit: cover;
}

.hero:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 75%;
  height: 100%;
  background: radial-gradient(
    ellipse 100% 100% at right center,
    transparent 80%,
    #000
  );
}

不過，Netflix團隊使用了一張圖像做爲覆蓋層。這裏不能肯定緣由，多是一個跨瀏覽器的問題或其餘東西。

選擇可訪問的覆蓋顏色

這是一個很棒的工具，能夠幫助咱們根據圖像選擇正確的疊加不透明度。

通常而言，若是你確保漸變疊加層能夠正確填充文本，而且具備不錯的色彩對比，那就能夠了。

測試

解決方案要通過測試，才能被認爲是好的，對吧？ 我用來測試漸變疊加層的一種方法是在其下方添加白色背景。 若是文本可讀，則漸變將適用於咱們使用的任何圖像。 若是沒有，則須要進行調整和加強。

在上面的例子中，我選擇了標題下的純色，對比度是4.74，這樣比較好。

~完，我是刷碗智，咱們下期見！

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://ishadeed.com/article/...

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。