我一直在 stackoverflow 上四处寻找问题的答案，但我找不到。问题是我有一个背景 img，我想在上面放文字。但是如果我使用 postition: absolute; 文本就会消失。我也不希望它出现在我的风格中，因为我将在具有不同图像的不同页面上使用它。
HTML:
<body>
<div id="header">
<img src="http://www.larsdejonge.nl/werk/img/background.jpg" class="begin">
<h1>Aangenaam Klassiek</h1>
<h2>Vormgeving & Frontend</h2>
</div>
</body>
还有我的 CSS:
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html, body {
width: 100%;
height: 540px;
background: #efede7;
}
body {
background: #efede7;
font-family: 'Montserrat', sans-serif;
color: #fff;
line-height: 1.3;
}
#header {
}
.begin {
width: 100%;
max-height: 540px;
}
h1 {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 3em;
font-weight: 700;
color: #fff;
text-align: center;
}
h2 {
font-family: 'ProximaNova', sans-serif;
font-size: 1.5em;
color: #c7c7c7;
text-align: center;
}
h2::after {
content: '';
width: 80px;
display: block;
background: #272f38;
height: 10px;
margin: 30px auto;
text-align: center;
}
我希望有人比我聪明，能解决这个问题？
感谢您已经调查过了!
最佳答案
您将背景设置为图像，因此它不仅是背景，而且还是具有维度的元素。你应该删除你的 <img />并使用 CSS 将其作为背景。
#header {
background: url('http://www.larsdejonge.nl/werk/img/background.jpg');
}
关于html - 如何让我的文字高于我的 img <div>？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26039498/