标题高度以适合背景图像

Question

我有一个与标题高度相关的问题。

HTML：

<header>
        <h1>
            Hello World!
        </h1>
</header>

CSS：

header {
    background-image: url("../images/header.png");
    background-size: cover;
    height: 100%;
    text-align: center;
    color: white;
}

在这种情况下，标题高度适合文本高度。有没有办法将标题高度设置为与图像高度相同？

Answer 1

您可以将标题图像作为前景img标记而不是背景图像，然后在CSS中执行此操作

header {
    position: relative;
}

header img {
    width: 100%;
    height: auto;
}

header h1 {
    position: absolute;
    top: 0;
}

Answer 2

为什么不使用Flexbox？这是现在的事实标准。

这是一个jsfiddle，我想到的是： JSFiddle example

基本上，你要做的是你的<h>元素实际上应该是你<header>中另一个div的孩子：

<header>
    <div class="backimage">
        <h1>
            Hello World!
        </h1>
    </div>
</header>

你的<header> div作为flex“容器”，将子元素显示为列，没有换行，在中心对齐，周围有空格，并且对齐中心：

header {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;
    align-content: space-around;
}

flex“容器”中的子元素应按行或列的顺序排序，在这种情况下，“容器”显示列布局中的项目，因此您希望标题显示为第一个项目。 flex是flex-grow，flex-shrink和flex-basis的简写;第三个元素应该是元素的大小，前两个控制此子元素与其他子元素相比将处理的容器元素的优先级或部分。在这种情况下，自动处理它。我们想要将标题重新定位在包含div的垂直居中，所以position: relative;，将容器高度的50％添加到`元素原点的原点（总是从对象的左上角开始） ，并且因为文本默认设置为1em，所以逻辑上会遵循.5em将是中心，因此从50％减去。给它水平居中的文本对齐中心：

    header h1 {
        position: relative;
        top: 50%;
        margin-top: -.5em;
        text-align: center;
        order: 1;
        flex: 1 0 auto;
    }

然后你只需要担心你的背景。背景，没有重复，定义图像的高度（在这种情况下将应用于div本身），例如这里的边框，这样你就可以看到div的边界，而不会忘记与标题相比，这应该是第二个：

.backimage {
    background-image: url('http://upload.wikimedia.org/wikipedia/  \
    commons/4/47/PNG_transparency_demonstration_1.png');
    background-repeat: no-repeat;
    border: 1px solid blue;
    width: 500px;
    height: 300px;
    order:2;
}

以下是您的最终结果：

以下是有关Flexbox使用情况的精彩指南： Flexbox guide

Answer 3

在标题的CSS中，您可以输入：

background: url("../images/header.png") 50% 50% / 100% no-repeat fixed;

它会自动放置并调整图像大小，使其不会拉伸。