Photoshop 图像背景全白答案

【问题标题】：Photoshopped image background all whitePhotoshop 图像背景全白
【发布时间】：2014-07-18 15:42:41
【问题描述】：

我有两张相同的图像，其中一张我在 Photoshop 中将不透明度编辑为 90%。我的原始图像呈现良好，而我编辑的图像呈现全白。除了实际文件本身之外，我没有更改代码中的任何内容。也许有人可以在这里阐明一些观点。谢谢

工作 CSS

#home-header {
background-image: url(firepit2.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 841px;
display: block;
}

无效的 CSS

#home-header {
background-image: url(firepit2.psd);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 841px;
display: block;
}

我什至尝试将新文件保存为 jpg 以查看问题是否与 psd 扩展名有关，但它仍然无法正常工作。也许我需要转换它？

【问题讨论】：

.psd 不是一个有效的图片格式，它是一个photoshop扩展，与图片无关
我以为可能是这样，但是当我将其保存为 jpg 时，它做了同样的事情。我是否需要通过文件转换器将 psd 转换为 jpg？
Photoshop 应该提供自己的转换器。尝试使用它。
您可以直接从 photoshop 保存为.jpg、.png 或任何其他有效的图像格式
代码不会改变源艺术的背景图像。您需要另存为透明图片（最好是png）。

标签： css ruby-on-rails photoshop

【解决方案1】：

如果图像具有透明度，则将其保存为 png

【讨论】：

虽然我很欣赏所有答案和 cmets，但这个特定的答案与目前对我有用的最相关。我在 PS 中将不透明度更改为 80%，然后将其保存为 PNG 的副本。谢谢

【解决方案2】：

我认为如果你想显示一个没有背景颜色的图像，你可以使用格式 png 或其他选项来解决，例如如果你想改变焦点图片的颜色，你可以使用 javascript 简单代码。

<img src="<?php echo $this->getSkinUrl("image.png"); ?>" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1" />

【讨论】：

你会建议把这个代码放在哪里？ html，正文？感谢您的意见。
我还是个新手，尤其是 JS。