Javascript小书签可以在网页上叠加图像吗？

可以使用书签叠加网页上的图像吗？不是作为弹出窗口，而是作为CSS定位的图像，并且具有高z-索引以显示在其他元素之上。没有掩码即Shadowbox或类似的jQuery效果。只是一个来自URL的图像，位于浏览器窗口的左下角。Javascript小书签可以在网页上叠加图像吗？

这是我迄今为止，但它可能是错误的方向发展：

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的功能，它作为一个书签来更改文本的情况下，在页面上，现在我希望能够在使用小书签时显示图像。

来源

2010-03-19 markratledge

设置身体背景图片，如果你想要的形象覆盖的页面也无济于事。另外，document.write不能直接用于添加CSS样式。

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

下面是增加了SO标志到窗口的角落，使用fixed定位的例子：

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

来源

2010-03-20 00:09:15

谢谢！没有意识到我在那里有背景图像调用。这对SO标志和我想要使用的图像非常有用。但是......有时在IE中使用可滚动页面的内容时，图像最终出现在页面底部。不知道如何解决。似乎也不一致，要么。 – markratledge 2010-03-22 04:54:59

那么，IE6不支持'position：fixed'，所以这可能是你的问题。有一个解决方法，但它从真正建立一个网站时才真正有用，因为它可以打破很多其他的CSS。编写跨浏览器书签是一个难题。 – 2010-03-22 05:31:13

这是IE8，但它必须是一个复杂CSS的网站特定的事情，这将在一个更简单的网站上专门使用。所以这并不重要。再次感谢。 – markratledge 2010-03-22 13:21:38

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

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

来源

2010-03-19 20:20:17 lincolnk

Javascript小书签可以在网页上叠加图像吗？

回答

相关问题