你知道如何使img标签的源图像透明，以便人们可以通过src图像看到背景图像吗？透明src使背景显示通过
说我有这个网站：
<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;
}
和fiddle。
当然，我不能单独使用img标签来完成。这看起来不错！谢谢 ：） – Spoeken 2011-12-21 04:25:55
您可以尝试在<span></span>中包装图像并设置背景，然后降低图像的透明度。它不会比用div替换图片更尴尬。
你甚至读过整篇文章吗？ – Spoeken 2011-12-21 03:42:24
@MathiasMadsenStav是的，我做到了。你必须操纵标记。您假设图像的来源和图像元素是分开的;他们不是。 – Mathletics 2011-12-21 14:18:10
你解释的正是我在我的问题中提供的例子。但嘿，谢谢你的尝试:) – Spoeken 2011-12-22 12:36:49
你可以在div中而不是背景图像，然后改变z-index，然后你可以直接在css中定位它。
我不认为你能理解我写的所有内容。增加了一些我的问题。 – Spoeken 2011-12-21 03:41:03
为什么不在编辑器中使图像部分透明，然后另存为PNG（因为JPG不支持透明度）？这比试图编写解决方案要容易得多。
原因是效率不高，然后上传照片的用户必须知道如何完成。 – Spoeken 2011-12-21 03:29:10
只需要三十秒就可以编写一个PHP脚本，使图像部分透明... – 2011-12-21 13:52:05
图像无法独立于背景变得透明。你为什么要这样做？ – Mathletics 2011-12-20 21:27:44
你完全确定吗？有一些使用JavaScript处理图像的方法。我想这样做的原因是让它看起来像图像有纹理。 – Spoeken 2011-12-21 03:38:08