Html 我应该如何设计这个img元素以达到我想要的效果

伙计们，这是我到目前为止的代码。假装chrome徽标是一个人的照片

我需要的照片是并排的名称和字幕。当你缩小浏览器的范围时，徽标将更接近文本，徽标将位于文本下方。我使用了

样式化组件

，我为徽标编写的样式是

const ImgCotainer = styled.img`
  position: relative;
  top: -300px;
  z-index: -1;
`;

然而，我迄今为止取得的成就有两个主要问题

首先，我不太擅长CSS。我无法很好地定位徽标（如演示中所示）

其次，我设置

z-index:-1使其位于文本下方。但奇怪的是，重叠大约需要1秒钟。你会明白我的意思，当你看到演示

我知道我的问题对于有很多css经验的人来说可能是微不足道的，但我真的非常感谢任何帮助

最后，我想要达到的效果是这样的。我觉得这张照片更像是一张独立的
img
，而不是整件事的背景图像。我试图找到像这样的网站的源代码，了解他们是如何做的，以及与之相关的动画，但我就是找不到
 您可以使用
flexbox
来实现它

1-使用样式化组件包装您的整个元素（6个元素1到5+img），让我们将其命名为
Flex

2-您的前5个元素应该包装在一个div中，这样5个元素本身将垂直显示，但整个div将与img div水平对齐

3-使用其他div包装您的图像

现在，它们将彼此相邻地水平对齐。对于移动设备，应在
Flex
组件中添加媒体查询以更改方向：

您的
Flex
组件如下所示：

const Flex = styled.div`
  display: flex;
  align-items: center; // To align the image in the center with the text.
  div:nth-child(1) {
    margin: 20px; // to have some spaces between the text and the image
  }
  @media (max-width: 768px) {
    flex-direction: column;
  }
`;

解决方案1:

您可以将图像的宽度设置为相对于视口宽度进行更改，还可以为较大屏幕设置所需的最大图像宽度

将“显示”设置为“块”，将“左右边距”设置为“自动”，以便在中间水平显示图像

const ImgCotainer = styled.img`
  position: relative;
  top: -300px;
  z-index: -1;
  width: 50vw;
  max-width: 400px;
  display: block;
  margin: 0 auto;
`;

这是一个可以使用的示例图像

const img = () => (
    <div style={{ transitionDelay: "600ms"}}>
      <ImgCotainer src="https://pngimg.com/uploads/doctor/doctor_PNG16036.png" />
    </div>
);

检查以下实现：


我会做两件事：1。将图像与名称和副标题放在一个div中，以便将它们放在一起。2.创建一个将隐藏图像的媒体查询，并根据屏幕宽度显示背景图像。@Rom Hi感谢您的及时回复。是的，它们在同一个容器中（
），即使它不完全是
div
。请在问题本身中包含与问题相关的所有代码，请参见Hi。谢谢你的回答！它工作得很好，但是文本的淡入动画消失了。你好，谢谢你的详细解决方案！我真的很感激！我有两个问题想问：1。我尝试使用手机设备选项查看您的演示，它位于文本下方，这很好，但是屏幕右侧有一些空白（或空白内容），这意味着您可以尝试将屏幕移到左侧，您可以看到右侧有一个空白区域。我想让页面始终与屏幕的宽度完全匹配，这样就不能水平移动屏幕。我怎样才能修改代码来解决这个问题？你能解释一下为什么在我的原始演示中，徽标在几秒钟后进入文本下，这对我来说非常奇怪。在你的原始演示中，徽标在几秒钟（3s）后进入文本下，是因为在你的CSTranslation循环中，你应用了“fadeup”父div元素（img变量）上的转换，而不定义其位置和z索引。另一方面，为子“ImgCotainer”组件定义位置和z索引是没有意义的，因为没有直接应用css转换。子容器的Z索引在完成了300MS超时的整个动画序列后生效，直到那时CSS转换将控制您的子元素。我不能在我的浏览器上使用电话设备选项复制空白区，如果您能帮助我复制它的步骤，这将有帮助。另外，在布局组件中，这个链接{children}的末尾还有一个额外的（链接），它也会呈现在最终的html输出中。
const img = () => (
    <div style={{ 
      transitionDelay: "600ms",
      position: "absolute",
      bottom: 0,
      display: "flex",
      zIndex: -1,
      justifyContent: "center" 
    }}>
      <ImgCotainer src="https://pngimg.com/uploads/doctor/doctor_PNG16036.png" />
    </div>
 );

const ImgCotainer = styled.img`
   width: 80vw;
   max-width:  700px;
`;