是否可以更改 css 中 JPG 圖片的背景顏色？

Question

我添加了一個在網上找到的徽標，但如果我嘗試更改頁面的背景顏色，它似乎不會受到影響。 （標志背景是白色的，問題是我只能從圖片中添加標志本身）。 我能做些什么來改變它嗎？

<div class="logo">
  <img src="https://www.onlinelogomaker.com/blog/wp-content/uploads/2017/11/gym-logo.jpg" alt="Gym logo" id="header-img">
</div>


body {
  background-color: #ced6e0;
}

img {
  position: relative;
  right: 260px;
  bottom: 50px;
  width: 25vw;
}

https://codepen.io/picklemyrickle/pen/XWjzyvb

謝謝。

Answer 1

CSS 可以為您做一定的量，具體取決於您想要什么。

由於您的徽標是黑白的，我們可以使用其中一種混合模式（乘法）來去除白色 - 通過保持背景顏色 - 並去除背景顏色，因為它與黑色中的 0 相乘。

這是使用背景混合模式的示例，它將圖像上的所有白色位更改為您選擇的背景顏色。 如果您想將圖像保存在 img div 中（可能沒有必要，但以防萬一），那么您可以研究 mix-blend-mode 。

這是一個片段：

 .logo { background-size: contain; background-repeat: no-repeat no-repeat; background-position: center center; background-image: url(https://i.stack.imgur.com/jn3XU.jpg); height: 200px; width: 200px; background-color: #ced6e0; background-blend-mode: multiply; }

 <div class="logo"></div>

Answer 2

您嘗試顯示的徽標是 jpg 文件。 JPG 文件不支持透明度。 但是 PNG 文件可以。

Answer 3

您使用的圖像是 JPG，它不支持透明像素（Alpha 通道） - 與 PNG 或 WebP 圖像格式不同。 您需要使用圖像編輯工具（如 Photoshop 或在線替代工具）從圖像中刪除白色背景。 完成此操作后，將新圖像保存為 PNG 或 WebP，圖像將自動通過 HTML 頁面上的任何背景顏色。

有許多在線圖像編輯器工具（Google 會向您展示許多選項），以及 Photoshop 的免費替代工具，例如 Gimp，您可以從https://www.gimp.org/免費下載。

您的徽標看起來很簡單，因為它僅使用黑色形狀，因此如果您可以訪問 SVG 格式，您可以使用該格式，從 SVG 中刪除背景就像編輯文本文件一樣簡單，您可以在您的代碼編輯器。

Answer 4

您可以使用 CSS 屬性 mix-blend-mode，但它目前僅在 Chrome、Firefox 和 Safari 上受支持，請檢查一下。 https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

混合混合模式：乘法；

Answer 5

如果將徽標轉換為 SVG 圖像，則可以使用 CSS 輕松更改背景顏色。只需將 class 或 id 添加到 SVG 元素即可：

<svg class="red-background" viewBox="0 0 100 100">
</svg>

然后將背景顏色設置為您想要的任何顏色或使用 CSS 將其設置為透明：

.red-background { background: #f00; }