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在这里是合适的;为什么不创建一个新的img元素并将其附加到正文？

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

Answer 2

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

您可能要做的是向页面添加新的img元素，并为其absolute或fixed定位，以及高z-index。< / p>

以下是使用fixed定位将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">';})();

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

2 个答案: