响应背景图像上的html文本

Question

我想实现以下目标:

哪里有背景图像,上面有文字(文字位置为bootstrap offset-6 col-6)

并为它提供响应.

问题是,与传统背景不同,我确实关心背景图像是如何截断的,无论宽度如何,我都需要手机可见.

我试过了: background: url(background-photo.jpg) center center cover no-repeat fixed;

img关于如何让div高度自动调整到背景大小的隐形技巧？

在所有情况下,手机都会被截断

将不胜感激

编辑:
根据要求 - 原始div结构是:

<div id="hungry">
    <div class="col-xs-offset-6 col-xl-offset-6 col-xs-6 col-xl-6">
        <p>Hungry doesn't always happen in the kitchen</p>
    </div>
</div>

但我把它改成任何有效的东西都没有问题......

Answer 1

使用 JavaScript 的解决方案

我知道这不是一个仅 CSS 的解决方案，我使用 JavaScript，但当我们寻找 CSS 的时候，它可以作为临时解决方案。

HTML 与您发布的内容相同：

<div id="hungry">
    <div class="col-xs-offset-6 col-xl-offset-6 col-xs-6 col-xl-6">
        <p>Hungry doesn't always happen in the kitchen</p>
    </div>
</div>

id 为“hungry”的 div 的 CSS 如下所示：

#hungry {
    background:url('https://i.stack.imgur.com/7xasp.jpg') no-repeat center center ;
    background-size:cover;
    width:100%;
}

#hungry最后，使用 JavaScript（我使用 jQuery 来使其更容易），您可以根据屏幕宽度调整高度：

// you know the size for your image
imageWidth = 1919;
imageHeight = 761;
imageProportion = imageHeight/imageWidth;

function resizeJumbo() {
    $("#hungry").css({ height: $(window).width() * imageProportion });
}

$(window).on("resize", function() {
    resizeJumbo();
});

$(document).ready(function() {
    resizeJumbo();
});

您可以看到使用此小提琴的演示：http://jsfiddle.net/hyfz0Lga/。

仅使用 CSS 的解决方案

只需稍微更新一下饥饿 div 的 CSS：

#hungry {
    background:url('https://i.stack.imgur.com/7xasp.jpg') no-repeat center center ;
    background-size:cover;
    width:100%;
    padding-top:20%;
    padding-bottom:20%;
}

您可以在这里看到它的工作原理：http://jsfiddle.net/hyfz0Lga/1/。

为什么padding-top:20%和padding-bottom:20%？

这些值与图片的大小以及它们之间的比例有关。在您的情况下：宽度 = 1919，高度 = 761，因此宽度和高度之间的比例为 (761 / 1919) * 100 = 39.65%。只需在顶部添加该值的一半，在底部添加该值的一半，然后文本将始终保持在中间，并且图片将始终成比例。

我知道这有点“hacky”并且需要了解一些数据，但它似乎运行得相当好。