2010-08-27 93 views
0

有什么办法来位置相关 您HTML元素之一拉伸你的页面的背景定位元素 - CSS-JQuery的

你已经捉襟见肘的背景下,

现在要写明旁边的标志的东西。

考虑的决议和浏览器

CSS & JQuery的

如果您知道任何战略或任何好的文章/教程

我会很高兴收到你

感谢听到

+1

你是如何拉伸背景的?请显示一些代码。 – 2010-08-27 08:12:42

+0

是的, 我拉伸了图像并使其成为全屏幕背景。 现在我想将元素放在我们在背景中看到的东西旁边,例如徽标。 该代码现在不可用。 – Sypress 2010-08-27 08:40:32

回答

1

您可以计算窗口中的坐标以匹配拉伸的坐标。因此,如果背景图像从坐标(0,0)一直延伸到(window.screen.width,window.screen.height),图像大小可以说(800,600),并且您的徽标位于图像坐标(44,100),和你想知道窗口的坐标匹配图像的一个...

function place(div, image_x, image_y, image_w, image_h) 
{ 
    //Calculate the window coordinates that match the image coordinates 
    var window_x = Math.Floor((window.screen.width/image_w)*image_x); 
    var window_y = Math.Floor((window.screen.height/image_h)*image_y); 

    //Make divs position absolute 
    $("#"+div).css("position", "absolute"); 

    //Set the left in the window coords that match the images coords 
    $("#"+div).css("left", window_x+"px"); 

    //Set the top to match the images coords 
    $("#"+div).css("top", window_y+"px"); 
} 

你会使用这样的功能:

place("logo_text_div", 44, 100, 800, 600); 

您可以修改代码以使用Ceil,您可以将协调转移到右侧。或者你可以用其他方式将window_x和window_y舍入,这样你就可以得到你想要的预失真。

0

window.screen.widthwindow.screen.height可能对您有所帮助。