html 全屏渐变色_快速提示：将图像用作全屏仿渐变背景

html 全屏渐变色

在此快速提示中，我将向您展示如何使用任何图像和几行CSS创建漂亮的渐变背景。 更重要的是，我将讨论性能并解释背景附件属性。

---

所以……这是关于什么的？

我们生活在一个网络（可以理解）偏爱CSS和浏览器生成的视觉效果胜于图像的世界中。 图像的分辨率有限，这使它们非常不灵活。 它们还会影响网站的性能，使服务器请求和带宽消耗更多。

但是有时候，我们可以依靠图像来提供良好的视觉效果。 它们在文件大小或分辨率方面不必很大，即使在高分辨率和视网膜显示器上，效果也不会受到太大影响。 让我们看一下使用图像（而不是CSS）作为渐变背景。

---

步骤1：寻找图片

如果您想使用，修改或共享图像，而又不花辛苦赚来的钱，则可以始终依靠Google高级图像搜索 。 在页面底部，您可以选择要搜索的使用权利类型。 在这种情况下，我将使用可以共享，修改和免费使用的图像。

---

步骤2：建立文件

打开Photoshop并创建一个新文件。 将宽度设置为300px，将高度设置为300px，将分辨率设置为72 PPI。

---

步骤3：导入并缩放图像

现在，将要修改的图像作为渐变背景导入，并按比例缩放以适合画布大小。

---

步骤4：套用渐层

要获得漂亮的渐变，请单击“滤镜”>“模糊”>“高斯模糊”，并将其设置为40（在您的情况下，可以根据图像增加或减少数字）。 而已。

如果您感到懒惰，也可以在pepsized.com上查看100个免费的模糊纹理 。

---

步骤5：保存为Web

完成这些第一步之后，就该保存渐变背景，并尽可能减小尺寸，同时保持合理的质量。 单击文件>保存为Web，然后将图像格式设置为JPEG。

现在进行压缩。 更改质量（最高，非常高等）时，您会看到最终结果的预览。 尽可能降低，通过在quality字段中键入实际值进行微调（在本例中为80），并将Blur设置为2。增加模糊度将使文件大小更多一点，并进一步柔化任何像素化。

检查“渐进式”。 这会影响图像如何加载到浏览器中。 渐进式加载意味着它将分多次加载； 它首先以低质量完全加载，然后再更高一点，然后再更高一点，而不是逐行加载。

单击“保存”以保存您的渐变图像。 在窗口的左下角，您将看到设法降低图像尺寸的程度。

快速提示（在快速提示内）：保存您的预设以备将来使用

确定合适的设置后，为什么不保存这些设置以便将来快速访问呢？ 在单击“保存”之前，单击“另存为Web”对话框右上方的小菜单图标，然后单击“保存设置”。

---

步骤6： CSS

即使我们创建了一个较小的图像，由于其模糊的性质，它也可以有效地扩展到更大的分辨率，而不会明显降低质量。 要在您的网站背景上加载此图片，请使用以下CSS小片段：

body{
	margin: 0;
	background: url('img/bg.jpg');
	background-size: 100% 100%;
	background-attachment: fixed;
}

说明：

• margin: 0 -如果您已经正确地重置了CSS，则可能没有必要。 它将删除图像周围的空白或浏览器视点中的边缘。
• background: url('bg.jpg') -您的背景图片的路径。 在url('')设置路径。
• background-size: 100% 100%; - background-size: 100% 100%; -这将调整背景图像的宽度和高度。 第一个值是宽度，第二个值是高度。 我选择百分比系统的原因是，根据您设置的值，它在每个设备上相对于视口的相对大小保持不变。 100％将填充任何浏览器的视口。
• background-attachment: fixed -使用此属性，我们可以指定背景是可滚动还是固定的。 就我们而言，我们希望固定背景。 它不会随内容滚动。 我将在下面更深入地讨论此属性。

---

减少HTTP请求

使用图像的一个缺点是将每个图像拖到浏览器中会增加服务器请求。 一个人可以进行的并行请求数量是有限的，因此在下载大量资产的情况下，可能会出现瓶颈。 为了解决这个问题，可以将图像转换为Base-64，然后使用Data-URI将其直接插入CSS文件中。

有许多服务可以为您执行此任务，但是自称为“超级简单dataURI工具” duri.me仍然非常易于使用。

有关如何工作的更多信息，请查看Chris Brown的介绍Data URIs 。

---

最后结果

看看我们的300px小图像，该图像遍布整个视口。 您也可以查看现场演示 。

---

关于background-attachment

background-attachment属性主要用于指定背景图像是应该滚动还是相对于其父元素固定。

我们以最简单的形式使用它：

body {
			background-image: url("img/imgname.png");
			background-attachment: fixed;
		}

它还支持多个背景图像，本身接受多个逗号分隔的值。 在此示例中，第一个背景图像（“ image1.png”）将滚动，第二个背景图像（“ image2.png”）将固定：

body {
			background-image: url("image1.png"), url("image2.png");
			background-attachment: scroll, fixed;
    	}

看一下演示 。

---

结论

这是一种在几分钟内获得全新网站背景的渐变效果的简单方法。 不要忘了权衡一下，您是否值得使用CSS渐变，但我希望您喜欢本教程-感谢您的阅读！

翻译自: https://webdesign.tutsplus.com/articles/quick-tip-using-images-as-fullscreen-faux-gradient-backgrounds--webdesign-9970

html 全屏渐变色