我的一个 div
中有 h1
和一张图片。目前,图像是一个背景,上面写有 h1
。是否可以将两个元素都放在一个 div
中(而不是将 h1
移到 div
之外)并将图像作为背景,但要移动 h1
高于背景图片所以它在自己的行上?
<div class="header">
<h1>Northside Youth Soccer League</h1>
<img src="images/nysl_logo.png" alt="Company Logo">
</div>
.header {
background-image:url("../images/design2_image1.jpg");
background-repeat: no-repeat;
background-size:cover;
height: 300px;
position: relative;
h1{
color: #000000;
font: 40px/60px "Sans", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
text-align:left;
最佳答案
您可以控制 position背景图片,例如将其从顶部向下推,使其显示在标题下方。
所以如果你这样做:
.header {
background-position: 0 60px;
height: 360px; /* Original height + 60px */
}
这会将您的背景放在左侧并从顶部向下 60 像素 - 因为这是您的标题行高。
这可能不是一个理想的解决方案,因为您的标题被锁定为明确的行数。 (在手机屏幕上会发生什么?)
此外,如果背景图片需要一定的高度,您必须将标题容器的高度增加 60 像素,因为您将背景图片向下移动了这么多。
关于html - 将 h1 移到与背景图像不同的行上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57991553/