如果我告诉你有一种方法可以使你所有的CSS背景图像不仅看起来不错，而且几乎没有时间表现良好，你会怎么说？
优化的CSS背景图像始终使网站看起来健壮且专业。此外，谷歌搜索喜欢快速高效的网站，排名高于其他网站。
在这篇文章/教程中，我将告诉你：
- 如何使用CSS背景图像构建简单的英雄横幅;
- 如何通过英雄横幅优化最大化性能。
我们开始做吧！
什么是CSS背景图片以及使用它们的原因？
CSS背景图像是使用称为背景图像的特殊CSS规则的图像。它将图像应用于DOM元素的背景。
该
background-image属性指定要用作元素背景的图像。默认情况下，图像会重复，因此它会覆盖整个元素。w3cschools.com
因此，图像与元素大小相同是必不可少的，因此可以对其进行缩放。但是，让我们稍后在逐步教程中讨论它。
CSS背景图像特别有用，因为可以在图像上添加其他元素。一些例子是：
- 文本
- 号召行动
- 例如，形式等任何其他元素。
CSS背景图像使用最受欢迎的用例之一是英雄横幅。
为什么这样？
首先，它允许自动将图像缩放到网页的大小，其次，在英雄横幅上放置标题，可能还有号召性用语。
以下是英雄横幅的示例：
本文的所有示例都可以在我的演示网站上访问：www.midday.coffee
英雄横幅一步一步的教程
让我们看看我们如何使用原始HTML和CSS实现英雄横幅，添加背景图像规则，并使其既适合桌面又适合移动设备。
步骤1.以下示例的标记非常简单明了。我们正在创建一个带有class =“banner”的<div>元素，以及两个嵌套的<p>元素作为标题和一个子标题。
<div class="banner">
<p class="h1 display-4">Find Your Coffee Cup</p>
<p class="lead">We have them all in one place!</p>
</div>
第2步。如您所见，我们还没有为我们的英雄横幅设置图像。我们将使用CSS 背景图像规则来做到这一点：
<style>
.banner {<br /> background-image: url('http://www.midday.coffee/assets/banner.jpg');<br /> background-size: cover;<br /> height: 600px;<br /> width: 100%;<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: center;<br /> align-items: center;<br /> margin-bottom: 32px;<br /> }
<p> .banner > p {<br /> color: white;<br /> padding: 10px;<br /> }</p>
</style>
主要部分位于代码段的顶部：
- background-image用于设置背景图片的 URL，
- background-size设置为 “覆盖”值以始终缩放图像以填充整个div，
- 这里高度是必要的，因为元素对图像尺寸一无所知，因此我们必须手动设置它们。
现在，我们可以使用该示例来查看当我们更改浏览器窗口大小时它的行为方式。如您所见，英雄横幅始终延伸到整个屏幕宽度。
第3步。最后，让它移动友好，因为它消耗了太多的垂直空间，文字有点偏。
<style>
@media (max-width: 576px) {<br /> .banner {<br /> align-items: flex-start;<br /> height: 400px;<br /> }<br /> }<br /></style>
在上面的代码片段中，我们使用媒体查询，告诉浏览器在浏览器窗口宽度低于576像素时覆盖横幅CSS。
表演是一个王者
让我们深入探索，让我们的英雄旗帜成为真正的英雄！
到目前为止，我们应该有一个完整而有效的英雄横幅示例。因此，我们可以更深入地了解我们的图像在不同设备上的行为。
2018年，全球52.2％的网站流量来自手机，高于去年的50.3％。
更多关于图像性能测试的信息。
步骤1.首先，让我们看看我们的英雄横幅是如何表现的。要考虑的两个主要因素是图像的大小及其加载时间。
我们使用Chrome开发者工具来捕获这些值。
要打开开发人员工具，请在Chrome网络浏览器中按F12。
然后转到网络选项卡并设置限制为Fast 3G，因此我们的测量将不依赖于Internet连接：
现在，让我们刷新页面并找到我们的横幅图片：
我们感兴趣的值位于“大小”和“时间”列中。
让我们将它们转移到表格中，这将成为我们的绩效报告：
我们正在记录桌面和移动屏幕的价值，因为我们期待为我们的英雄横幅使用响应式图像。
请注意，我们总是使用相同的图像，以便我们暂时将桌面值复制到移动列。
第2步。是时候优化我们的背景图像了。在本文中，我们使用Pixboost服务为我们节省了一些时间，但您可以选择手动优化和调整图像大小并将其上传到您的托管。请记住，Pixboost不仅提供图像调整大小和优化功能，还可以：
第3步。让我们更新背景图片的网址，以便进行优化：
< style >
.banner {
background-image： url（ ' http://pixboost.com/api/2/img/http://www.midday.coffee/assets/banner.jpg/optimise?auth=MTg4MjMxMzM3MA__ '）;
/ *其余的样式属性是相同的* /
}
</ style >
这是如何设置URL：基于URL的集成。
或者，您可以使用Photoshop或Gimp等其他软件调整和优化您的英雄横幅图像。
步骤4.让我们重新运行性能测试，捕获并更新结果：
- 正如您所看到的，我们刚刚将图像重量减轻了25Kb，即31％。
- 此外，通过使用CDN，我们从加载时间减少了超过1秒（34％）。
不是很令人印象深刻吗？！我们继续吧！
步骤5.虽然桌面和移动设备的结果仍然相同。鉴于桌面屏幕比移动设备大得多，它没有多大意义。
我们来解决这个问题。
从我们之前介绍的媒体查询中，我们可以看到屏幕的最大宽度为576px。此外，我们将英雄横幅的高度设置为400px，因此我们的最大图像尺寸为576x400px。这意味着它是我们需要为所有移动设备提供服务的最大尺寸。
我们需要做的就是为CSS移动断点添加一个单独的background-image属性：
@media（max-width：576px）{
.banner {
background-image：url（'http://pixboost.com/api/2/img/http://www.midday.coffee/assets/banner.jpg/fit?size=576×400&auth=MTg4MjMxMzM3MA__'）;
align-items：flex-start;
heigt：400px;
}
}
我们正在使用“适合”操作，将图像调整到精确的大小。让我们看看我们现在的桌面和移动性能如何：
好极了！
我们能够将图像尺寸减小到28.7 kb，时间减少到725 ms。对于我们网站的用户来说，这是令人振奋的消息！
有关Pixboost用法的更多信息：Pixboost优化工具概述。
这是我们的最终业绩报告，结果如下：
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/261463.html