如何使IMG标签的内容透明但不是标签的背景？

Question

正如标题所说，如何在不使用CSS的情况下使背景透明的情况下，使IMG标签中的图像透明？ 我无法访问HTML，因此无法制作DIV。

没有不透明度且红色背景的图片：

img {
  background-color: red;
}

使用opacity: 0.2;的图片

img {
  background-color: red;
  opacity: 0.2;
}

我想用CSS实现的目标：

Answer 1

请试试这个：

将css透明度样式用于图像标记，而不是保存图像的div。

假设您喜欢这样：

<div class="img_container"><img src="myimage.png"></div>

然后CSS将

div.img_container img {
    opacity: 0.2;
    filter: alpha(opacity=20); /* For IE8 and earlier */
}

Answer 2

如果您的约束条件是 仅 修改img元素的CSS，那么我认为您想要做的事情是不可能的。不透明度应用于HTML元素，包括其背景。无法设置HTML元素的选择性部分的不透明度。

如果您可以使用Javascript，那么您可以编写一个脚本，将img元素包含在div或span元素中，并将相同的背景应用于此包装器-元件。当img元素透明时，这将显示相​​同的背景。

Jquery有一个wrap函数，可用于此：

$(".classToWrap").wrap("<div class='wrapperClass'></div>");

Jsfiddle demo

如果Javascript也不是一个选项，那么我不会只使用CSS来做到这一点。

Answer 3

如果您无权访问HTML，则只剩下使用新background-blend-mode的选项，您可以通过调整来估算您想要的内容。这需要您使用background-image，而不是在src中使用它。

另一种方法是使用::before/after内容插入黑客以及block和background的几个opacity。这需要一种类型的容器，已知img的尺寸，并且可能会有一些约束。