响应背景图像上的html文本

时间:2015-01-11 13:19:32

标签: html css twitter-bootstrap

我想实现以下目标: enter image description here

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

让它有所回应。

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

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

How to get div height to auto-adjust to background size?

上的隐形img技巧

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

将不胜感激

修改
根据要求 - 原始的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>

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

2 个答案:

答案 0 :(得分:4)

JavaScript解决方案

我知道这不是一个仅使用CSS的解决方案,但是当我们寻找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为&#34;饥饿&#34;的div的CSS看起来像这样:

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

最后,使用JavaScript(我使用jQuery使其更容易),根据屏幕宽度调整#hungry的高度:

// 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('http://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%。只需在顶部添加一半的值,在底部添加一半的值,然后文本将始终保持在中间,并且图片将始终成比例。

我知道它有点&#34; hacky&#34;并且知道一些数据,但它似乎运作得相当好。

答案 1 :(得分:0)

你可以尝试调整Bootstrap 3中的jumbotron类,就像我为我的网站做的那样。

.jumbotron {
    background: url('background-photo.jpg') no-repeat center center;
}

你可以根据你想要的尺寸改变jumbotron的尺寸。

<div row jumbotron>
    <div class="col-md-6 col-md-offset-6">text</div>
</div>