Question

我的最终目标是在相对于背景图像的固定位置放置一个文本块。

但似乎阻止这种情况的是，当我调整浏览器大小时，图像保持与我想要的大小相同，但图像会移动 - 即，渲染图像的顶部并不总是顶部图像源。

这是一个模型 - 想象一下我希望文本块在蓝框中：

http://jsfiddle.net/rrauenza/9hkn8p4e/embedded/result/

黄色＆＃34;天花板＆＃34;在这张图片中，有时会因不同的浏览器尺寸而消失。

<head><style>
.intro-header {
    text-align: center;
    color: #f8f8f8;
    background: url(http://c3softworks.com/demos/images/backgrounds_04.jpg) no-repeat center top;
    background-size: cover;
    background-position: center top;
    height: 700px;
}
.intro-message {
    position: relative;
    padding-top: 100px;
    height: 700px;
}
</style></head>

<div class="intro-header">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="intro-message">
                     <h1>Title</h1>

                     <h3>...subtitle</h3>

                    <hr class="intro-divider">
                    <div class="col-lg-2 col-lg-offset-3">
                         <h4>Something</h4>

                    </div>
                    <div class="col-lg-2 col-lg-offset-2">
                         <h4>Something Else</h4>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

卸下：

background-size: cover;

如果您指望背景图片不按比例缩放，可能有助于不要问它。

另外，在你的小提琴.intro-header中有一个background-position:center bottom，在这里你发布center top。当然需要center top。

设置封面背景始终从图像顶部开始？

1 个答案: