如何删除/禁用图像样式中的新背景图像过渡？

Question

因此，对于我认识的所有人，所有浏览器中的所有图像都会突然添加。可能是某种新的更新或标准，无论如何。我不知道什么以及为什么。

但是从现在开始，当你输入任何图像时，都会有这个东西：

<img style="
        -webkit-user-select: none;
        margin: auto;
        background-color: hsl(0, 0%, 90%);
        transition: background-color 300ms;"
        src="http://pngimg.com/uploads/light/light_PNG14421.png
">

我特别指的是background-color: hsl(0, 0%, 90%) 和transition: background-color 300ms;。在 Firefox 中，它看起来不是过渡，而是只有静态的白色背景。没原因。没有透明背景的图片你看不出有什么区别，但是如果你直接打开任何有 alpha 通道的 png 图片，它就会突然变成白色的背景。

喜欢http://pngimg.com/uploads/light/light_PNG14421.png

例如这个。

我试图找出如何禁用它，但我不知道为什么首先会有这样的背景。这么突然。我经常在浏览器中打开图像来比较它们，这真的让我很恼火，现在我不能这样做。有谁知道它来自哪里？某些 CSS 或 HTML 标准是否发生了突然变化？是Windows的东西吗？ （但是 Android 11 在 Opera Touch 上做同样的事情......）还是什么？

我可以通过使用 Tampermonkey 之类的东西来移除 any img 样式的过渡效果吗？如果是这样，我该怎么做？

澄清...我只想删除背景颜色（以及可选的过渡）。如果 div 包含某些内容，我已经看到可以删除整个 div 的脚本。但是如果样式包含任何内容，我不想删除 img 。只是删除烦人的样式，这是不必要的。

提前致谢。我尝试根据我在 Google 中找到的内容自己制作脚本，但已经几天了，无法弄清楚。

Answer 1

没有足够的信息来给出正确的答案，因此答案将是一般性的。

查找图片
您需要一些标准来查明正确的图像，例如 id、类等
我在这个例子中使用了src

const images = document.querySelectorAll('img[src^="http://pngimg.com/uploads/"]');

遍历图像并进行更改

images.forEach(img => {
  img.style.backgroundColor = 'transparent';  // change to whatever desired
  img.style.transitionProperty = 'none';      // change to whatever desired
}):

替代方法

上面的 UserScript 更改是在脚本运行时进行的。如果图像是在以后动态创建的，则需要添加代码来等待更改并应用/重新应用更改。

您还可以使用 UserScript 插入 CSS。 CSS 规则适用于所有存在的图像以及稍后动态创建的图像。

这是一个例子......

const css = `
img[src^="http://pngimg.com/uploads/"] {
  background-color: transparent !important;
  transition-property: none !important;
}`;

GM_addStyle(css); // TamperMoneky | ViolentMonkey | FireMonkey
// or 
GM.addStyle(css); // GreaseMonkey | TamperMoneky | ViolentMonkey | FireMonkey

您也可以使用 UserStyle/UserCSS (Stylish | Stylus | xStyle | FireMonkey) 来实现类似的结果。与 UserScript 相比，使用 UserStyle/UserCSS 的开销更低。

这是 UserStyle 的示例。您需要在 UserStyle 控件中设置匹配的 URL。

img[src^="http://pngimg.com/uploads/"] {
  background-color: transparent !important;
  transition-property: none !important;
}

这里是 FireMonkey UserCSS 的示例

/*
==UserCSS==
@name           Change Background
@match          .... the site to match
==/UserCSS==
*/

img[src^="http://pngimg.com/uploads/"] {
  background-color: transparent !important;
  transition-property: none !important;
}

---

评论更新

它正在打开图像本身（右键单击并“在新选项卡中打开图像”）。

我明白了....这里有一些例子。

• 使用 Firefox 87.0a1 在 http://pngimg.com/uploads/light/light_PNG14421.png 上测试
• 基于以 .png 结尾的 URL

FireMonkey UserCSS

/*
==UserCSS==
@name           Remove Image background
@match          *://*/*.png
@run-at         document-start
==/UserCSS==
*/

img {
  background: transparent !important;
}

任何经理的用户脚本（GreaseMonkey | TamperMoneky | ViolentMonkey | FireMonkey）

// ==UserScript==
// @name          Remove Image background
// @match         *://*/*.png
// @run-at        document-start
// @grant         GM.addStyle
// ==/UserScript==

GM.addStyle('img {background: transparent !important;}');

带有 TM 的用户脚本 |虚拟机 | FM（使用旧版 GM_addStyle 和 TamperMoneky | ViolentMonkey | FireMonkey）

// ==UserScript==
// @name          Remove Image background
// @match         *://*/*.png
// @run-at        document-start
// @grant         GM_addStyle
// ==/UserScript==

GM_addStyle('img {background: transparent !important;}');

没有 GM 功能的用户脚本

// ==UserScript==
// @name          Remove Image background
// @match         *://*/*.png
// @run-at        document-start
// ==/UserScript==

(() => {

const style = document.createElement('style');
style.textContent = 'img {background: transparent !important;}';
(document.head || document.body).appendChild(style);

})();

注意

如果需要file:///处理，则添加

// @match         file:///*.png