嘿，伙计们，有没有一种方法可以让文本与Netflix的图像完美匹配https://www.netflix.com/ng/title/81067760我已经有了图像，但现在不可能让文本完全匹配，也不覆盖图像这是我的图像代码
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<body style="background-color: #323232">
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<picture>
<source class="mov" media="(max-width: 599px)" srcset="https://image.tmdb.org/t/p/original<%=Details.poster_path%>" >
<img class = "d-block w-100 img" src = "https://image.tmdb.org/t/p/original<%=Details.backdrop_path%>">
</picture>
<div class = "details">
<h1><%=Details.title %></h1>
<p><%=Details.release_date%></p>
<h2><%=Details.description%></h2>
</div>
</head>
</body>
</html>
问题是，我如何使div类的细节与我只需要复制大图像的图像相匹配，以及文本如何像Netflix那样垂直排列在屏幕左侧。查看此链接https://www.netflix.com/ng/title/81067760希望现在更清楚了，谢谢。。。
我不确定您要复制什么netflix元素，但我可以向您展示如何使用.details类垂直对齐图像。
首先在picture和div class='details'元素周围包装一个div class='container'。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<body style="background-color: #323232">
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<div class='container'>
<picture>
<source class="mov" media="(max-width: 599px)" srcset="https://image.tmdb.org/t/p/original<%=Details.poster_path%>" >
<img class = "d-block w-100 img" src = "https://image.tmdb.org/t/p/original<%=Details.backdrop_path%>">
</picture>
<div class = "details">
<h1><%=Details.title %></h1>
<p><%=Details.release_date%></p>
<h2><%=Details.description%></h2>
</div>
</div>
</head>
</body>
</html>
在styles.css 的顶部添加以下行
.container {
display: flex;
align-items: center;
}
Flexbox非常适合这种东西。阅读此处
如果有帮助，请告诉我。
也许z-index属性可以帮助您。https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
这是允许文本覆盖图像的方法之一。对不起，如果我没有正确理解你的话。