在 HTML 页面中添加类似于 atom io 的图像背景

Question

我想知道 atom.io 网站的背景是如何形成的。当我检查来源时，并非没有图像的链接。当我R单击图像时，我也无法保存它。

我可以知道如何在我正在开发的网站上获得类似的功能吗？

Answer 1

他们使用带有 CSS 背景图像的<div>。

如果你想做类似的事情，写下你的div，比如：

<div class="mybackground"></div>

并在样式表中编写此 CSS：

.mybackground {
    height: 590px;
    background-image: url("yourimage.png");
    background-position: 50% 0;
    background-size: auto, auto 100%;
}

Answer 2

要继续@Simrandeep Singh，您可以在css中使用类似的东西：

.hero {
  background-image:url('/path/to/image');
  background-repeat: no-repeat;
  background-position: center;
}

请注意，atom.io 使用了svg图像，可能是使用Adobe Illustrator等程序创建的。这使用矢量形状来创建可以在网站上进行动画处理的图像(当您向下滚动页面时，可以在图像中看到(。

我希望这有所帮助。