在背景图像上的位置元素.但是BG img随窗口改变大小.的CSS [英] Position element over background image. But the BG img changes size with the window. CSS

问题描述

我有一个背景图像，该图像的大小更改为窗口大小，我需要在其上放置一个元素，以使该元素始终相对于背景图像位于同一位置.

I have a background image which changes size to the windows size, and I need to position an element on it so that it is always in the same place relative to the background image.

如何！?

CSS

background:url("http://placehold.it/100x100") no-repeat center center fixed;
-webkit-background-size:"cover";
-moz-background-size:"cover";
-o-background-size:"cover";
background-size:"cover";

背景图像覆盖了整个背景，并随窗口而改变了大小，但通过覆盖一些图像来保持比例.

The background image covers the entire background and changes size with the window but keeps proportions by having some overlay.

编辑-2016

我使用纯CSS的解决方案是将元素放置在中间，然后使用calc函数正确地偏移它.然后相应地调整其大小，我使用vmin值:

My solution to this with pure CSS is to position the element in the middle and then offset it correctly using calc function. And then to resize it accordingly i use the vmin value:

$offset-top: ...;
$offset-left: ...;

.element {
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + #{$offset-top}), calc(-50% + #{$offset-top}));
  width: 50vim; 
  height: 50vim;
}

推荐答案

您所要求的根本不是一件小事，它基本上涉及弄清楚background-size:cover的工作方式，然后使用JavaScript定位元素.由于background-size:cover的性质，图像如何从x轴或y轴流出，因此CSS无法做到.

What you are asking for is not a trivial thing at all, it basically involves figuring out how background-size:cover works and then positioning your element using JavaScript. Due to the nature of background-size:cover how the image can flow out of the x-axis or y-axis this cannot be done with CSS.

这是我解决问题的方法，在加载并调整大小时，它会计算图像的比例和x或y偏移量，并在相关位置绘制指针.

Here is my solution to the problem, on load and resize it calculates the scale of the image and the x or y offset and draws the pointer at the relevant location.

jsFiddle(Google红色"o"中的红色点)

HTML

<div id="pointer"></div>

CSS

body {
    background:url(https://www.google.com.au/images/srpr/logo4w.png) no-repeat center center fixed;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}

#pointer {
    margin-left:-10px;
    margin-top:-10px;
    width:20px;
    height:20px;
    background-color:#F00;
    position:fixed;
}

JS

var image = { width: 550, height: 190 };
var target = { x: 184, y: 88 };

var pointer = $('#pointer');

$(document).ready(updatePointer);
$(window).resize(updatePointer);

function updatePointer() {
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();

    // Get largest dimension increase
    var xScale = windowWidth / image.width;
    var yScale = windowHeight / image.height;
    var scale;
    var yOffset = 0;
    var xOffset = 0;

    if (xScale > yScale) {
        // The image fits perfectly in x axis, stretched in y
        scale = xScale;
        yOffset = (windowHeight - (image.height * scale)) / 2;
    } else {
        // The image fits perfectly in y axis, stretched in x
        scale = yScale;
        xOffset = (windowWidth - (image.width * scale)) / 2;
    }

    pointer.css('top', (target.y) * scale + yOffset);
    pointer.css('left', (target.x) * scale + xOffset);
}

这篇关于在背景图像上的位置元素.但是BG img随窗口改变大小.的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！