如何正确布局类似的标题块

Question

请帮忙，我不明白如何在标题中正确布局这样的块，有一个容器（1440px无关紧要），其中有一个徽标压在左侧，如何做到这一点徽标后面有一个 img 或 gif，它延伸到整个徽标容器，并且还延伸到左侧，我附上了它的外观示例。 在此输入图片描述

我尝试通过位置来做到这一点，并将img移到容器之外，但我无法将其附加到徽标上

Answer 1

我希望您的徽标是一个锚，它包含徽标图像。

您可以向锚点添加伪元素，调整其宽度以添加填充以按照您想要的方式对齐，然后应用图案图像作为背景。

.logo {
  display: block;
  position: relative;
}

.logo::before {
  background: url("path/to/image.jpg") center/cover no-repeat;
  content: '';
  display: block;
  height: 100%;
  left: -2vw; /* padding offset */
  position: absolute;
  top: 0;
  width: calc(100% + 4vw);
}