Javascript 书签可以覆盖网页上的图像吗？

Question

可以使用书签在网页上覆盖图像吗？不是作为弹出窗口，而是作为由 CSS 定位的图像，并具有高 z-index 以显示在其他元素之上。并且没有遮罩即 Shadowbox 或类似的 jQuery 效果。只是来自 URL 的图像，位于浏览器窗口的左下角。

这是我到目前为止所拥有的，但这可能是错误的方向：

javascript:(function(){document.write("<style type='text/css'>body {background-image:url(http://example.com/image.png); position: absolute; left:50px; top:300px; z-index:9999;}</style>");})()

我有一个 JS 函数，它作为书签来更改页面上文本的大小写，现在我希望能够显示使用小书签时的图像。

Answer 1

如果您希望图像覆盖页面，为正文设置背景图像将无济于事。另外，document.write不能直接用于添加CSS样式。

您可能想要做的是向页面添加一个新的 img 元素，并为其指定 absolute 或 fixed 定位，以及较高的 <代码>z-index。

以下是使用固定定位将 SO 徽标添加到窗口一角的示例：

javascript:(function(){document.body.innerHTML += '<img src="http://sstatic.net/so/img/logo.png" style="position: fixed; left: 10px; bottom: 10px; z-index: 1000">';})();

Answer 2

我认为 document.write 在这里不合适；为什么不创建一个新的 img 元素并将其附加到正文中？

var img = document.createElement('img');
img.src = 'urlhere';
// TODO: set position and whatnot
body.appendChild(img);