通過背景定位元素-CSS-JQuery

Question

有什么方法可以定位與頁面拉伸背景相關的HTML元素之一嗎？

您已經拉伸了背景，

現在，您想在徽標旁邊寫一些東西。

考慮分辨率和瀏覽器

CSS和jQuery

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

我很高興收到你的來信

謝謝

Answer 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取整，以便獲得所需的精度。

Answer 2

window.screen.width和window.screen.height可能對您有所幫助。