保持div覆盖相对于背景图像，而不管窗口大小

Question

我想用background-size: cover将一些文本覆盖在背景图像上。

这里的问题是，无论窗口的大小如何，如何使覆盖div相对于背景图像保持在相同的位置？

这是一把小提琴：http://jsfiddle.net/resting/2yr0b6v7/

所以我想把单词eye放在猫的眼睛上，不管窗口大小。

CSS或JS解决方案均受欢迎。

Answer 1

编辑：添加js替代

我确信这可以用css完成，几乎放弃了，但后来我想起了新的（ish）css单元vh和vw。。。。

jsfiddle

CSS

html, body{
    height: 100%;
    width: 100%;
}
.cat {
    height: 100%;
    width: 100%;
    position: relative;
    background:url(http://placekitten.com/g/800/400) no-repeat center center / cover;
}
.place-on-eye {
    position: absolute;
    color: #fff;
    margin:0;
}
@media (min-aspect-ratio: 2/1) {    
    .place-on-eye {
        bottom: 50%;
        left: 46.875%;
        margin-bottom: 1.25vw;
    }
}
@media (max-aspect-ratio: 2/1) {   
    .place-on-eye {
        bottom: 52.5%;
        left: 50%;
        margin-left: -6.25vh;
    }
}

解释

所以左眼大约在375190，由于图像是居中的，我们也想知道它离中心有多远，所以是25，10。由于图像是覆盖的，因此图像的大小将根据视口的纵横比是大于还是小于背景图像的纵横比而改变。知道了这一点，我们可以使用媒体查询来定位文本。

图像为2:1，因此当视口纵横比>2:1时，我们知道图像的宽度就是视口的宽度，因此<p>的左侧位置应始终为46.867%（375/800）。底部位置将更加困难，因为图像延伸到视口顶部和底部之外。我们知道图像是居中的，所以首先将<p>移动到中间，然后将其向上推图像高度的2.5%（10/400）。我们不知道图像的高度，但我们知道图像的纵横比，图像的宽度等于视口的宽度，因此高度的2.5%=宽度的1.25%。所以我们必须将底部向上移动1.25%的宽度，这可以通过设置margin-bottom:1.25vw来实现。顺便说一句，在这种情况下，我们可以在没有vw的情况下做到这一点，因为填充总是相对于宽度计算的，所以我们可以设置padding-bottom:1.25%，但在下一种情况下，如果必须相对于高度定位左侧，这将不起作用。

当纵横比为<2:1是类似的。图像的高度是视口的高度，因此底部位置应始终为52.5%（210/400），左侧的计算方法与上面类似。将其移到中心，然后将其向上后退图像宽度的3.125%（25/800），即等于图像高度的6.25%，即等于视口高度，因此为margin-left:-6.25vh。

希望这是正确的，并能帮助你！

JS替代

jsfiddle

这里有一个使用js的替代方案。它使用了一些功能，如forEach和bind，这些功能可能会导致问题，具体取决于您需要使用的浏览器的使用年限，但它们很容易更换。使用js，您可以直接计算bg图像的缩放尺寸，这使得定位更容易。不是最优雅的代码，但这里是：

//elem:     element that has the bg image
//features: array of features to mark on the image
//bgWidth:  intrinsic width of background image
//bgHeight: intrinsic height of background image
function FeatureImage(elem, features, bgWidth, bgHeight) {
    this.ratio = bgWidth / bgHeight; //aspect ratio of bg image
    this.element = elem;
    this.features = features;
    var feature, p;
    for (var i = 0; i < features.length; i++) {
        feature = features[i];
        feature.left = feature.x / bgWidth; //percent from the left edge of bg image the feature resides
        feature.bottom = (bgHeight - feature.y) / bgHeight; //percent from bottom edge of bg image that feature resides               
        feature.p = this.createMarker(feature.name);
    }
    window.addEventListener("resize", this.setFeaturePositions.bind(this));
    this.setFeaturePositions(); //initialize the <p> positions
}
FeatureImage.prototype.createMarker = function(name) {
    var p = document.createElement("p"); //the <p> that acts as the feature marker
    p.className = "featureTag";
    p.innerHTML = name;
    this.element.appendChild(p);
    return p
}
FeatureImage.prototype.setFeaturePositions = function () {
    var eratio = this.element.clientWidth / this.element.clientHeight; //calc the current container aspect ratio
    if (eratio > this.ratio) { // width of scaled bg image is equal to width of container
        this.scaledHeight = this.element.clientWidth / this.ratio; // pre calc the scaled height of bg image
        this.scaledDY = (this.scaledHeight - this.element.clientHeight) / 2; // pre calc the amount of the image that is outside the bottom of the container
        this.features.forEach(this.setWide, this); // set the position of each feature marker
    }
    else { // height of scaled bg image is equal to height of container
        this.scaledWidth = this.element.clientHeight * this.ratio; // pre calc the scaled width of bg image
        this.scaledDX = (this.scaledWidth - this.element.clientWidth) / 2; // pre calc the amount of the image that is outside the left of the container
        this.features.forEach(this.setTall, this); // set the position of each feature marker
    }
}
FeatureImage.prototype.setWide = function (feature) {
    feature.p.style.left = feature.left * this.element.clientWidth + "px";
    feature.p.style.bottom = this.scaledHeight * feature.bottom - this.scaledDY + "px"; // calc the pixels above the bottom edge of the image - the amount below the container
}
FeatureImage.prototype.setTall = function (feature) {
    feature.p.style.bottom = feature.bottom * this.element.clientHeight + "px";
    feature.p.style.left = this.scaledWidth * feature.left - this.scaledDX + "px"; // calc the pixels to the right of the left edge of image - the amount left of the container
}
var features = [
    {
        x: 375,
        y: 190,
        name: "right eye"
    },
    {
        x: 495,
        y: 175,
        name: "left eye"
    },
    {
        x: 445,
        y: 255,
        name: "nose"
    },
    {
        x: 260,
        y: 45,
        name: "right ear"
    },
    {
        x: 540,
        y: 20,
        name: "left ear"
    }
];
var x = new FeatureImage(document.getElementsByClassName("cat")[0], features, 800, 400);

Answer 2

我借用了两个答案中的原则。黑点应覆盖在线的末尾。但这个解决方案与实际点有一定比例的偏差。

也许有人可以改进它？

JS:

$(function() {
    function position_spot() {
        w = $(window).width();
        h = $(window).height();
        wR = w/h;
        // Point to place overlay based on 1397x1300 size
        mT = 293;
        mL = -195;
        imgW = 1397;
        imgH = 1300;
        imgR = imgW/imgH;
        tR = mT / imgH; // Top ratio
        lR = mL / imgW; // Left ratio
        wWr = w / imgW; // window width ratio to image
        wHr = h / imgH; // window height ratio to image
        if (wR > imgR) {
            // backgroundimage size
            h = imgH * wWr;
            w = imgW * wWr;
        } else {
            h = imgH * wHr;
            w = imgW * wHr;
        }
        $('.overlay-spot').css({
            'margin-top': h * tR,
            'margin-left': w * lR
        });
    }
    $(window).resize(function() {
        position_spot();
    });
    position_spot();
});

Answer 3

根据您如何设置背景图像的位置和大小：

background-position:center center;
background-size:cover;

背景图像的中心应该仍然在屏幕的中心——这作为一个常数很有用，所以试着用p.place-on-eye 也这样做

.place-on-eye {
    ...
    top: 50%;
    left: 50%;
}

现在，段落的左上角位于屏幕的中心，如果您还添加宽度和高度属性，您实际上可以将元素居中放置在屏幕的中心。所以它就像：

.place-on-eye {
    ...
    width:50px;
    height:50px;
    text-align:center /* to make sure the text is center according to elements width */
    top: 50%;
    left: 50%;
    margin:-25px 0 0 -25px;
}

现在p.place-on-eye的中心正好在屏幕的中心，就像背景图像的中心一样。为了让它越过猫眼，只需根据需要偏移左边和上边距。

所以像margin:-27px 0 0 -60px;这样的东西应该能做到

小提琴