<分区>
我有一个纯 html 代码:
section.cta, section.cta2, section.cta3, section.cta4 {
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-position: center;
padding: 250px 0;
}
section.cta .cta-content, section.cta2 .cta2-content, section.cta3 .cta3-content, section.cta4 .cta4-content {
position: relative;
z-index: 1;
}
section.cta .cta-content h2, section.cta2 .cta2-content h2, section.cta3 .cta3-content h2, section.cta4 .cta4-content h2 {
margin-top: 0;
margin-bottom: 25px;
color: black;
max-width: 450px;
font-size: 50px;
}
section.cta .cta-content p {
color: black;
max-width: 450px;
font-size: 20px;
}
section.cta {
background-image: url('https://cdn1.tnwcdn.com/files/2011/08/bliss.jpg');
}
@media (min-width: 768px) {
section.cta .cta-content h2, section.cta2 .cta2-content h2, section.cta3 .cta3-content h2, section.cta4 .cta4-content h2 {
font-size: 80px;
}
}
section.cta .overlay {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
}<section class="cta">
<div class="cta-content">
<div class="container">
<h2>this is header</h2>
<p>this is some other text.</p>
</div>
</div>
<div class="overlay"></div>
</section>结果是一个具有漂亮背景和左对齐文本的页面。
文本基本上是这样的:
| this is header |
| this is some other text. |
当用户全屏查看网页时，它位于背景的最左侧。我想更改它，以便文本像这样可见:
| this is header |
| this is some other text |
我该怎么做？
我的 jsfiddle 在这里: