css中背景图像移动_深入了解：在CSS中使用编码图像（背景图像）

作为设计师，通过CSS添加背景图像对您而言毫无疑问。 传统上或通常情况下，这是我们的操作方法-使用background-image属性并直接链接到图像源文件。

div {
	background-image: url(img/image.png);
}

但是，我们以这种方式添加的每个图片网址都会导致浏览器运行更多请求。 换句话说，如果我们有10个不同的URL，则浏览器需要10个HTTP图像请求。

很少有解决方法–我们要么采用CSS Image Sprite方法，要么可以使用Encoded Image 。

• 观看演示

编码图像

编码的图像由一些随机字符组成，如下所示。

https://img-blog.csdnimg.cn/2022010619273138759.png

我们可以将此编码图像嵌入<img>元素中，也可以通过background-image属性嵌入。

由于它直接嵌入文档中，并且没有指向其他来源，因此浏览器不需要加载HTTP请求来传递输出。

<img width="50" height="50" src="https://img-blog.csdnimg.cn/2022010619273138759.png" >

background-image: url(https://img-blog.csdnimg.cn/2022010619273138759.png);

如何将图像转换为代码格式

有很多在线工具可以将图像转换为代码，但我首选的一种工具是Duri.me。 这是一个简单的工具。 只需拖放您的图像，然后我们就可以将输出复制为图像，CSS或普通代码。

缺点

但是，每种技术都有其缺点，也不使用编码图像。 编码图像的一些缺点是：

• 可维护性 ：使用编码图像时，这是最难的部分。 我们不仅要使用实际的图像本身，还需要通过更多的技术步骤。
• 浏览器支持 ：Internet Explorer 6和7不支持此编码图像。但是，Internet Explorer 9应该可以。
• Internet Explorer 8 ：关于Internet Explorer 8，它将代码大小限制为仅32768字节。

如何申请

这是一个示例，向您展示如何应用它。 这次，我们将创建噪声纹理。 下面的屏幕截图显示了它的外观。

1.透明地创建噪音

首先，我们需要具有透明性的PNG格式的噪声纹理。 幸运的是，有一个方便的工具可以轻松创建它，称为NoisePNG 。 我们能够设置输出尺寸，噪声强度和图像不透明度。

在这种情况下，我将背景色设置为#333333 ，然后将“不透明度”降低到50 ，最后将图像纹理变为“ 单色” 。 下载图像。

2.将噪声转换为代码

现在，我们去Duri.me。 将下载的PNG图片拖放到上方，然后选择“将代码复制为CSS” 。

3.在CSS中添加代码

最后，将代码放在样式表中，如下所示：

body {
background-color: #333333;
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-image: url(data:png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAgAElEQVR4nKVdeUBO2fv/uK7bdV13Xqk0UfY1jJ1kiUlCVPYQiaQUQouoUBlrStQUhUyEamSXLevYGvsSRXbZJmuWwe+Pt3O6913SfH+ff+q999xzzvOc/TnPAjs7OxEAvL29eWhg1qxZLAAcOHDA5OnTpyrN9wRpaWlcnTp1pLVr13Ka70JCQupNmjRJAoCioiIuICCAA4Ds7GxBM+3+/fvFHTt2MBYWFix5NnXqVJH8n5SUxADA+PHjaTlfv37lAcDR0ZENDQ1V/fbbbwo6mjdvrkUXgSiKHADExsYaAsDcuXP5zMxMwdzcnFm2bBmtX1ZWFvPq1StFfTdt2iQBQO/evRn5cxMTEz44OFiEHhw+fJhdvHix4OLiwupLowUbGxsuLCyMmzFjBiW8UaNGioK3bt1qquvb2rVrKypz7do1LcYDQGRkJAcAUVFRhtHR0SIA5ObmcgDw7t07AQAsLCz0EiYHx3Fa6ZYuXWqoK62FhQVtoCNHjkgAsG7dOg4APn/+zAPA7NmzjQDA2NhY0cEuXLggBgQEsHXr1lUw08nJiebp6uqqeHf06FERAL5+/SrUr1+fT01NlaytrbkuXboIkiTxJ0+e1E9jVlaWCgBycnK0mNigQQN22LBhLADY2tpKubm5jGYab29vWhl3d3du48aNWoXNnj2bMFvrex8fH8WzlJQU6eLFiywAJCYmMqXfs1lZWRwAsCxboV6WnZ0tkf9nzJghAMDp06fpt5GRkayjoyNl6v3798VHjx6pFi1apDXiXVxc+Fq1akn//vsvBwBVq1YV7e3tWQC4fPkyW1xczBYUFOhl8rBhwxQj9uDBgxIAREVF8UVFRdr0bN26VQSA7du3KxolOTmZAYDnz5+X22s9PT3p1HbhwgXBz89PCAwM1GJ+jx49aOFXrlyhhDs6OnIAcPz4cRPyrHr16nrLvHz5MnPy5EkeAFatWqVVjj7Mnz9f2LRpk970U6ZMYVJSUuj7M2fOaDWOs7Mzbej8/HxR3zR05coVBgCysrJYAOjWrZvOWUMLPXv25AHg+PHjIgAMHTqUFrhw4ULasrNmzaKV27JlC+Pj42MxY8YM4fPnz8yiRYsUzHN2dhbbtWsnlZSUMAkJCRw