jquery - 通过背景定位元素 - CSS-JQuery

Question

有什么方法可以定位您的一个 HTML 元素 与您页面的拉伸(stretch)背景？

你把背景拉长了，

现在您想在 Logo 旁边写一些东西。

考虑分辨率和浏览器

CSS 和 JQuery

如果你知道任何策略或任何好的文章/教程

很高兴收到你的来信

谢谢

Answer 1

您可以计算窗口中的坐标以匹配拉伸(stretch)的坐标。因此，如果背景图像从坐标 (0,0) 一直向后拉伸(stretch)到 (window.screen.width, window.screen.height) 并且图像大小可以说是 (800, 600)，并且您的 Logo 位于图像的坐标 (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 舍入，以便获得您想要的精度。