使用CSS

Question

我有一个简单的页面，其中所有内容（<h1>，<h2>，<p>等）都包含在<div>中，以便拥有相同的宽度。

我喜欢正文文本的样子，并希望保持这种方式，但我想在标题中添加背景图像。它应该从页面的顶部（和我的情况下的窗口）开始，并在标题本身的最后一行的基线处结束，同时也从窗口的左侧向右延伸。在下图中，我说明了所需的布局。在它下面，我绘制了我尝试过的html层次结构。

事实上，我已经尝试使用

创建一个<h1>的孩子

width: 100vw;
position: relative;
left: 50%;
transform: translate(-50%);

但：

1. 由于页面有z-index: -1;，对于一些奇怪的错误，我无法点击具有相对定位的链接
2. 由于浏览器的支持，我不想使用vw个单位。
3. 我仍然无法将背景扩展到顶部。

如您所见，<h1>及其边距的字体大小以像素为单位定义，但页面仍然会动态显示，因为当我调整窗口大小时，<h1>的行数会增加。 / p>

HTML

<div class="page">
   <h1>Heading</h1>
   <h2>Section 1</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

CSS

body {
    height: 100%;
    width: 100%;
    margin:0px;
}

.page {
    font-size: 20px;
    width: 90%;
    max-width: 70ch;
    padding: 50px 5%;
    margin: auto;
    z-index: -1;
}

h1 {
    font-size: 30px;
    margin-top: 0;
    margin-bottom: 10px;
}

h2 {
    font-size: 22px;
    margin-bottom: 26px;
}

p {margin-bottom: 24px;}

JS Fiddle

Answer 1

两个建议：

将h1和身体的其余部分分成两个不同的div。将背景应用于第一个div。

<div class="background-here">
<div class="page">
   <h1>Heading</h1>
</div>
</div>
<div class="page">
   <h2>Section 1</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

或者您可以将背景应用于正文并使用background-repeat: repeat-x或bakcground-size: cover。但这取决于图像的设计方式。