透明 src 以便背景显示答案

【问题标题】：Transparent src so that background shows through透明 src 以便背景显示
【发布时间】：2011-12-21 11:48:44
【问题描述】：

你知道如何让img标签的源图片透明，这样就可以通过src图片看到背景图片吗？

假设我有这个 html：

<img src="my_image.jpg" height="200" width="300" style="background:url(img/bg.jpg) repeat;" />

我想以某种方式定位源图像并将不透明度设置为 i.ex。 0.7 .

使用 jQuery，我可以复制图像的 src、高度和宽度，并将标记操作为如下所示：

<div style="background:url(img/bg/jpg) repeat; height:200px; width:300px;">
    <div style="background:url(my_image.jpg); height:200px; width:300px; opacity:0.7;"></div>
</div>

但是对于如何做到这一点，有人有更好/更简单的建议吗？最好不操纵标记。

【问题讨论】：

图像不能独立于背景透明。你为什么要这样做？
你完全确定？有一些使用 JavaScript 处理图像的方法。我想这样做的原因是让它看起来像图像有纹理。

标签： javascript jquery html css

【解决方案1】：

我认为您无法仅使用<img/> 来做到这一点。试试：

<div class="image-wrapper">
  <img src="my_image.jpg" height="200" width="300"/>
</div>

.image-wrapper {
  display: inline-block;
  background: url(img/bg.jpg) repeat;
}
.image-wrapper img {
  vertical-align: top;
  opacity: 0.7;
}

还有一个fiddle。

【讨论】：

当然，我不能单独使用 img 标签。这看起来不错！谢谢:)

【解决方案2】：

您可以尝试将图像包裹在 <span></span> 中并在其上设置背景，然后降低图像的透明度。比用 div 替换图片更方便。

【讨论】：

@MathiasMadsenStav 是的，我做到了。您必须操纵标记。您假设图像的来源和图像元素是分开的；他们不是。
您所解释的正是我在问题中提供的示例。但是，嘿，谢谢你的尝试:)
@MathiasMadsenStav 你在拖钓吗？不，不是。您将两个图像移至背景。我建议您仅将图像包装在一个跨度中。你接受的答案和我的一样！
我想我不太明白你的意思，举个例子会有很大帮助。我现在明白你的意思了。对不起，拖钓，不知道我发生了什么。

【解决方案3】：

您可以将图像放在 div 中而不是背景中，然后更改 z-index，然后您可以直接在 css 中定位它。

【讨论】：

我不认为你理解我写的所有内容。在我的问题中添加了更多内容。

【解决方案4】：

为什么不在编辑器中使图像部分透明，然后另存为 PNG（因为 JPG 不支持透明度）？这比尝试编写解决方案要容易得多。

【讨论】：

因为效率不高然后上传照片的用户必须知道如何完成。
写一个让图片部分透明的PHP脚本只需要三十秒...