延伸到页面的与CSS的边缘和顶部

我具有其中的所有内容（<h1>，<h2>，<p>等）包含在<div>内一个简单的页面，以便具有相同的标题的背景图像宽度。延伸到页面的与CSS的边缘和顶部

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

事实上，我已经尝试创建的<h1>一个孩子

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

但：

由于页面具有z-index: -1;，一些奇怪的错误，我可以不要点击相对定位链接
我不想使用vw因浏览器支持而联合。
我仍然无法设法将背景延伸到顶部。

的<h1>及其边缘是以像素为单位定义，如您所看到的字体大小，但页面仍然表现动态因为我调整窗口的大小，的<h1>增加行数。

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

来源

2016-04-28 Willege

大多数时候人们将宽度约束分离到自己的类中，并多次使用它。这样，你把h1放在一个容器类的div里面，然后你把它放在你想要有全宽背景的div中，然后页面的其余部分就落在它后面。像这样：https：//jsfiddle.net/fu2038vb/5/ – tylerism

两个建议：

将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。但这取决于图像的设计方式。

来源

2016-04-28 19:23:10 Gabriel

延伸到页面的与CSS的边缘和顶部

回答

相关问题