Javascript小书签可以在网页上叠加图像吗? [英] Can a Javascript bookmarklet overlay an image on a web page?

问题描述

可以使用小书签在网页上叠加图像吗?不是作为弹出窗口，而是作为CSS定位的图像，并具有较高的z索引以显示在其他元素的顶部.并且没有遮罩，即Shadowbox或类似的jQuery效果.只是来自URL的图像，它位于浏览器窗口的左下角.

Can a bookmarklet be used to overlay an image on a web page? Not as a pop-up, but as a image positioned by CSS and with a high z-index to display on top of other elements. And without a mask i.e., Shadowbox or similar jQuery effect. Just an image from a URL and positioned in the bottom left hand corner of the browser window.

这是我到目前为止的内容，但这可能是走错了方向:

This is what I have so far, but it may be the wrong direction to be going:

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功能，可以用作小书签来更改页面上文本的大小写，现在我希望能够在使用小书签时显示图像.

I have a JS function that works as a bookmarklet to change the case of text on the page, and now I'd like to be able to show an image when the bookmarklet is used.

推荐答案

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

Setting a background image for the body won't help if you want the image to overlay the page. Also, document.write can't be used directly to add CSS styles.

您可能想要做的是在页面上添加一个新的 img 元素，并为其赋予 absolute 或 fixed 定位，以及高 z-index .

What you probably want to do is add a new img element to the page, and give it absolute or fixed positioning, along with a high z-index.

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

Here's an example that adds the SO logo to the corner of the window, using fixed positioning:

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小书签可以在网页上叠加图像吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！