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

Question

https://codesandbox.io/s/relaxed-margulis-rr9zo

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

我需要照片与名字和副标题并排。当您缩小浏览器时，徽标会更靠近文本，并且徽标会位于文本下方。我使用了 styled-component 并且我为徽标编写的样式是

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

然而，到目前为止我所取得的成就有两个主要问题。

首先，我不太擅长CSS。我不能很好地定位徽标（正如您在演示中看到的那样）

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

我知道我的问题对于在 css 方面有丰富经验的人来说可能是微不足道的，但我非常感谢任何帮助。

最后，我想要达到的效果是这样的。我觉得这张照片更有可能是独立的 img 而不是整个事物的 background-image。我试图找到此类网站的源代码，并了解他们是如何做到的以及与之相关的动画，但我就是找不到。

Answer 1

你可以用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;
  }
`;

Working Demo

Answer 2

解决方案一：

您可以将图像宽度设置为根据视口宽度进行更改，还可以为更大的屏幕设置所需的图像最大宽度。

将显示设置为块并将左右边距设置为自动以在中心水平显示您的图像。

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>
);

方案二：

为图像容器的父元素设置定位和 z-index 将解决您的图像动画在文本前面，然后在几秒钟后动画在文本下方的问题。

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;
`;

检查以下实现：

Sandbox

Demo

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

How should I style this img element to achieve the effect I want

html

css

frontend

reactjs

styled-components