Question

在我拍摄我的问题之前，有人在拍摄我之后：

我很有可能搜索整个网络来解决我的问题，因为我在这里......你会明白我的问题现在还没有解决......

我是如此沮丧的原因......没有一个解决方案，但很多！所有这些人都有职业＆amp; CON＆＃39;第我是一个总是寻找逻辑的人......我们都知道在网络发展中，没有多少或根本没有。

我正在寻找简单，非常简单的东西。 - 响应的标题图像。我已经检查了许多很好的例子，但他们都使用了不同的东西。从背景大小：包含到表格单元格。让我闭嘴，解释我的沮丧。

这就是我想得到的：

Link 3它不一定是视频......只是一张图片......

我想要一个使用背景图像的标题，我可以在背景图像的顶部放置文本（居中的水平和垂直）。我也希望图像能够响应。我取得了一些成就，但我并不认为我正确地做到了这一点，因为我使用固定高度的图像。如果我没有高高在上，没有任何表现，我找不到另一种解决方案。

这就是我所拥有的：

My Website

我希望我能说清楚...... 有人能帮我吗！请？？？非常喜欢???

Answer 1

请检查这个小提琴：http://jsfiddle.net/gszzapsd/6/。这是您希望缩小屏幕大小时标题的功能吗？你引用的bellroy.com网站，他们实际上使用的是100％宽度和自动高度的图像，然后显示LIVE LIFE OUTSIDE的文本绝对位于它上面。这就是他们特定部分的代码的样子：

<div id="landingCover" class="snow">
      <img src="http://assets.bellroy.com/skin/frontend/default/bellroy/images/elements/snow/cover.1405318855.jpg" alt="" class="hidden-image" width="1348">
      <div class="landing-fixed-header skrollable skrollable-between" data-0="top:0%; opacity:1" data-top-bottom="top:15%; opacity:0" style="top: 0%; opacity: 1;">
        <h1>LIVE LIFE OUTSIDE</h1>
        <h2>EXTRA WALLET PROTECTION FOR ALL WEATHER CONDITIONS</h2>
      </div>
</div>

尽管如此，如果您希望根据浏览器窗口的大小缩放标题div的背景图片，请将这些样式添加到您网站上#page_title的CSS中：

#page_title {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

响应式网页设计 - 标题

1 个答案: