0

首先，我对网页设计和这个网站非常陌生。

我会在聊天中问这个问题，但我没有足够的声誉，而且我认为我无法回复现有的已回答问题，所以我希望如果我在这里发布这个问题一切都好：

我的问题是关于“webkit-mask-image”，并且来自这个主题：flexslider border-radius does not wrap image in Chrome, Safari, but will in Firefox .

用以下代码回答了这个问题：“-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAGwAAAEAAGbA+oJAAAAAElFTkSuQmCC”

我只是想尝试解决这个问题，因为我还在学习，但是有人可以为我定义这个代码吗？这是 SVG 格式吗？

URL链接到底是什么？或者它只是如何使用 SVG 格式的代码“召唤”数据图像 png-64 （我认为它上升到 24(!) ）？

所以总而言之，我问的是上面的代码：

1) url : URL 的用途以及是否链接到外部源？

2) data:image/png;base64 ：可能有哪些变化？

3) iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC：从 Illustrator 等基于矢量的程序派生的 SVG？

非常感谢您的宝贵时间，我只想在实施之前了解一些事情。

4

1 回答 1

0

  1. 最常见的是，url 用于定义背景图像的上下文中。您指示从给定的 uri 加载指定的图像。你可以在这里阅读更多关于它的信息。例子：

    背景图像：url（“图像/darkpattern.png”）；

  2. image/png 是一种所谓的MIME-TYPE，它定义了您要描述的内容类型（文本、视频、音频、图像……）。所以基本上你可以插入任何类型的媒体。Base64 是使用的字符集，在这种情况下是一种以 ASCII 格式呈现二进制数据的方案。

  3. 此处所做的不是加载存储在 Web 服务器某处的 png 图像，而是将该图像的内容直接包含在 css 中。如果你用记事本打开这个 png 文件，你会看到很多特定于其编码的奇怪符号。用 base64 编码应该等同于上面的字符串（“iVBORw0KGgoAAAA...”）。您必须考虑，使用这种技术可以保存请求，但同时会失去缓存图像的能力。这意味着每个请求都会再次加载图像，这就是为什么只建议对小图片这样做。就个人而言，我不喜欢这种技术。

于 2013-07-10T20:59:06.623 回答