我试图创建一个带有图片的标题，淡入淡出，还有一个标题& 子标题。我为淡入框创建了一个新的div(&为h1&h2创建了一个单独的div，这样它就可以在图像的底部)。但不知何故，渐变容器比图像更宽，我不知道如何使它们相同的大小！我将非常感谢任何帮助。我对这一切都很陌生!
https:/i.stack.imgur.comLZhLn.png
HTML:
<body>
<header>
<img src="">
<div class="container">
<div class="title">
<h1>title</h1>
<h2>subtitle</h2>
</div>
</div>
</header>
</body>
CSS:
body {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
header {
position: relative;
}
img {
object-fit: cover;
}
.container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.1));
background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.1));
background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.1));
}
.title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
很奇怪，你的代码是这样做的，但尝试使img 100%的容器的宽度。
否则实验一下，如果你想让头、容器和图片的宽度是屏幕的宽度，就把头的宽度设置为100vh，然后把容器和图片设置为100%。
img {
width: 100%;
}