时间戳

首页 > 解决方案 > 是否可以在 css 中更改 JPG 图像的背景颜色？

html - 是否可以在 css 中更改 JPG 图像的背景颜色？

问题描述

我添加了一个在网上找到的徽标，但如果我尝试更改页面的背景颜色，它似乎不会受到影响。（标志背景是白色的，问题是我只能从图片中添加标志本身）。我能做些什么来改变它？

<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

谢谢。

标签： htmlcssimagetagsbackground-color

解决方案

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>

推荐阅读