html - 在 html5/css 中用单一 rgb 透明颜色覆盖图像

标签 html css html5-canvas

我想在我的 html5 程序中读取具有固定背景 rgb 颜色的图片(gif 彩色图像),比如 (0,0,0),并将其覆盖在另一张图像上,只有背景颜色透明。请注意,这个背景不是固定的形状——例如,它是前景鸟儿飞过的天空。我只是想看看那只鸟。 我尝试了以下,

<div style="z-index: 100; position: absolute; top: 39px; left: 72pix; background-color: #ffffff; opacity: 0.5">

<img alt="overlay image" src="overlay.gif" WIDTH=32 HEIGHT=32></div></div>

但这会使整个覆盖层 0.5 透明。 我试着插入这个,

<div style="background: rgba(0,0,0,0.0)"></div>

但这不会改变图像的 rgb 值,只会设置图像周围的实际背景。

最佳答案

仅使用 CSS/HTML 无法做到这一点。它将需要 SVG 或 JavaScript。类似问题的答案是here .

关于html - 在 html5/css 中用单一 rgb 透明颜色覆盖图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14777595/

相关文章:

javascript - HTML5 : canvas and image size

javascript - HTML5+JS canvas 意想不到的线条样式

javascript - 如何缓存或预渲染 Canvas 动画

javascript - 将 Canvas 绘制到另一个 Canvas 上不起作用

javascript - 使用 Bootstrap 使用 onclick 按钮在模式窗口中设置文本框值

javascript - Java Applet 未定义

javascript - 如何使用 Perl 访问 JavaScript 驱动的网页的内容?

javascript - 即使在单击按钮后页面也会重新加载

jquery - 计时器 - 使用 jquery 函数在 2 秒内显示 0 到贬值

javascript - 如何在拖动元素时逐渐降低其不透明度?