Question

我想用background-size: cover在背景图片上叠加一些文字。

问题是如何将叠加div保持在相对于背景图像的相同位置，而不管窗口的大小？

这里有一个小提琴：http://jsfiddle.net/resting/2yr0b6v7/

所以我想将eye这个词放在猫的眼睛上，无论窗口大小如何。

CSS或JS解决方案都受到欢迎。

Answer 1

编辑：添加了js替代

我确信这可以用css完成并且几乎放弃了，但后来我想起了新的（ish）css单位vh and 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;
    }
}

<强>解释

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

图像为2：1，因此当视口宽高比> 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%，但是在下一种情况下，这不会起作用必须相对于高度定位左侧。

纵横比<＆lt; 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

根据您设置背景图像位置和大小的方式：

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;这样的东西应该这样做。

fiddle

Answer 3

我做了fiddle借用了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();

});

无论窗口大小如何，都要相对于背景图像保持div叠加

3 个答案: