透明src，使背景显示通过

Transparent src so that background shows through

本文关键字：显示 背景 src 透明      更新时间：2023-09-26

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

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

我不认为你可以做到这一点，只有一个<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;
}

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

你可以把图片放在div而不是背景中，然后改变z-index，然后你可以直接在css中定位它

为什么不让图像在编辑器中部分透明，然后保存为PNG(因为JPG不支持透明度)?这比编写解决方案要容易得多。

相关文章：