Html 在图片上移动文本

我想将标题文本移到图片上。将图片的底部边距更改为-50%会有所帮助，但文本会根据屏幕大小显著移动

.banner{
高度：自动；
宽度：100%；
最大宽度：1200px；
z指数：1；
文本对齐：右对齐；
颜色：白色；
保证金：无；
底边：无；
}
.标题h1{
颜色：红色；
宽度：100%；
身高：100%；
保证金：自动；
z指数：1；
文本对齐：居中；
文本阴影：黑色；
浮动：左；
}
.标题p{
颜色：红色；
文本对齐：居中；
浮动：左；
}

乔的车库
乔的车库
我们以诚实的价格提供准确的维修服务，消除了对汽车故障的担忧

.banner{
高度：自动；
位置：绝对位置；
宽度：100%；
最大宽度：1200px；
z指数：1；
文本对齐：右对齐；
颜色：白色；
保证金：无；
底边：无；
}
.标题h1{
位置：绝对位置；
颜色：红色；
宽度：100%；
身高：100%；
保证金：自动；
z指数：1；
文本对齐：居中；
文本阴影：黑色；
浮动：左；
}
.标题p{
位置：绝对位置；
z指数：1；
顶部：50px；
颜色：红色；
文本对齐：居中；
}

乔的车库
乔的车库
我们以诚实的价格提供准确的维修服务，消除了对汽车故障的担忧

如果您想将文本置于div中的图像上方，我有一个解决方案：）

你可以有一些flex指南（对于css来说非常好）

柔性导轨

方法：我使用了

.banner div

作为

标题和.text

的容器

.banner.content

定义

页边距

（如果要将标题，…放在底部/左侧…）

html，正文{
最小高度：100%！重要；
身高：100%；
}
* {
框大小：边框框；
}
身体{
保证金：0；
身高：100%；
}
.横幅{
背景：url(https://static1.squarespace.com/static/562837d1e4b0c53c5afbc078/t/5863246febbd1ab7ab5125b6/1482892406200/slide_405344_5057908_free.jpg?format=1500w)无重复中心；
背景尺寸：封面！重要；
宽度：100%；
身高：100%；
显示器：flex；
}
.横幅.内容{
保证金：5px0；
/**如果要将内容居中，请使用自动边距；如果要在底部对齐，请使用自动边距0**/
}
.横幅.标题{
字号：600；
字号：1.5em；
保证金：0.5px 0；
}
.banner.title、.banner.text{
颜色：红色；
}

我的头衔
我的文字

我肯定会用

背景图像来做这个。毕竟，这就是它的目的

.banner {
    background-image: url('https://static1.squarespace.com/static/562837d1e4b0c53c5afbc078/t/5863246febbd1ab7ab5125b6/1482892406200/slide_405344_5057908_free.jpg?format=1500w');
    background-size: cover; // or 'contain', depending on what you want.
}

为了获得最佳效果，请将重叠标记放在
.banner
容器中，添加一些
高度
控件、
背景位置
样式和您最喜欢的垂直对齐技巧（假设您希望文本垂直居中和水平居中）


正文{
保证金：0；
}
.横幅{
对齐项目：居中；
背景：url（'https://static1.squarespace.com/static/562837d1e4b0c53c5afbc078/t/5863246febbd1ab7ab5125b6/1482892406200/slide_405344_5057908_free.jpg?format=1500w""中",；
背景尺寸：封面；
显示器：flex；
证明内容：中心；
保证金：自动；
最大宽度：1200px；
最小高度：100vh；
文本对齐：居中；
宽度：100%；
}
.标题h1，.标题p{
颜色：红色；
线高：1.5；
保证金：0；
文本阴影：1px 1px 4px黑色；
}

乔的车库
我们以诚实的价格提供准确的维修服务，消除了对汽车故障的担忧

<代码>你想要图片中间的标题吗？你可以很容易地做到这一点。是的，我做到了！我刚才试过了，但是运气不好。谢谢！我最初把它作为背景图像，但我不知道如何显示超过div的高度并使其居中。