如何在网站中使用 html 和 css 使用没有背景的图像（即使它不应该有白色背景）答案

【问题标题】：How to use images with no background(even there should be no white background to it) using html and css in a website如何在网站中使用 html 和 css 使用没有背景的图像（即使它不应该有白色背景）
【发布时间】：2019-11-29 15:15:25
【问题描述】：

我希望我网站中的图片在背景中像 png 格式一样透明，但是当我包含 png 图像时，png 图像后面的黑白框会按原样显示，因此我很难定位图像使用 CSS，因为图像有背景，因此看起来很奇怪，并且不能与 CSS 定位元素一起正常工作。

这是 HTML 中的两张图片

<img class="bottom-cloud" src="cloudwithback.jpg">
<img class="mountain" src="mountain.jpg">

CSS 代码：这是使图像的背景透明的 CSS 代码。

.top-cloud
{
    height: 200px;
    width: :200px;
    background: transparent; 
}
.bottom-cloud
{
    width:200px;
    height:200px;
}
.mountain
{
    width: :300px;
    height: 300px;
    background:transparent;
}

但它不会使背景透明。

【问题讨论】：

图片为 .jpg 格式，因此您不能只删除它们的“背景”。 html和css没有这个能力。
css 不会使您的实际图像背景透明。它使保存图像的 DOM 元素的背景透明。您必须删除图像文件本身的背景。
你能提供一个链接到你的工作代码，比如codepen、jsbin ...

标签： html css

【解决方案1】：

我不确定我是否 100% 关注你，所以如果我跑题了，请原谅我。

首先，这个星球上没有一款软件可以可靠地从图像中删除不需要的背景内容，您必须在 Photoshop（或其他图像编辑器）上手动完成。

其次，如果您看到“png 图像后面的黑白框”，很可能是故意的。 Google 上的很多图片都有假的透明或半透明背景。

最后，如果您还没有，请学习一些图像编辑。您正在尝试做的事情确实效率低下。

与其尝试使用 HTML 和 CSS 组合云图和山脉图像，不如在单独的图像编辑程序中完成所有工作并在那里进行处理，从而在一张图像中为您提供完美的山脉云图，这就是你想要的图像。

如果您无法使用 Photoshop，请尝试 GIMP。它是免费的，但学习需要很大的耐心。

【讨论】：

【解决方案2】：

您没有使用正确的 png 图像格式。您正在使用.jpg。所以绝对是jpeg而不是png

【讨论】：

【解决方案3】：

您的图像格式是 JPG，请记住 PNG 支持透明度，而 JPG 不支持。因此，要将图像转换为没有背景的 PNG 格式，您必须使用橡皮擦工具或 Photoshop 或类似应用程序中的魔术橡皮擦工具删除背景图像，同时保存图像，选择 PNG 格式。希望对您有所帮助

【讨论】：