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小書籤可以在網頁上疊加圖像嗎？

回答

相關問題