Question

您知道如何使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>

但有没有人有更好/更简单的建议如何让这种情况发生？最好不要操纵标记。

Answer 1

您可以尝试将图像包裹在<span></span>中并在其上设置背景，然后降低图像的透明度。用div替换图像不那么尴尬。

Answer 2

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

Answer 3

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

Answer 4

我认为只有<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。

透明src使背景显示通过

4 个答案: