C#如何对背景渐变进行base64编码

我已经建立了一个CSS生成器应用程序，用户可以选择梯度的两个停止点，它将吐出相应的CSS。我正在使用该应用程序作为指南。以下是它为具有IE9支持的#1e5799->#7db9e8渐变提供的CSS：

background: #1e5799;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #1e5799 0%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(left, #1e5799 0%,#7db9e8 100%);
background: -o-linear-gradient(left, #1e5799 0%,#7db9e8 100%);
background: -ms-linear-gradient(left, #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to right, #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );

正如您所看到的，除了第二种使用base64编码以支持IE9之外，我可以轻松地替换所有样式的十六进制颜色代码。因为这个应用程序是C#，所以我需要弄清楚如何获取base64编码的

数据

字符串以用于这种样式。我找到了一些链接，当内存或文件系统中有一个实际的图像时，该如何做，但这不是一个图像，而是一个渐变

我需要知道，在C中，我如何能够使用两个渐变停止点（在本例中为#1e5799和#7db9e8），并说出以下内容：

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

更新：以下是我为子孙后代编写的代码：

    public string GetGradientCss(string topColor, string bottomColor)
    {
        var builder = new StringBuilder();
        builder.AppendLineFormat("background: url(data:image/svg+xml;base64,{0};", GetBase64EncodedBackground(topColor, bottomColor));
    }

    private string GetBase64EncodedBackground(string topColor, string bottomColor)
    {
        var builder = new StringBuilder();
        builder.Append("<?xml version=\"1.0\" ?>");
        builder.Append("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 1 1\" preserveAspectRatio=\"none\">");
        builder.Append("  <linearGradient id=\"grad-ucgg-generated\" gradientUnits=\"userSpaceOnUse\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">");
        builder.AppendFormat("    <stop offset=\"0%\" stop-color=\"{0}\" stop-opacity=\"1\"/>", topColor);
        builder.AppendFormat("    <stop offset=\"100%\" stop-color=\"{0}\" stop-opacity=\"1\"/>", bottomColor);
        builder.Append("  </linearGradient>");
        builder.Append("  <rect x=\"0\" y=\"0\" width=\"1\" height=\"1\" fill=\"url(#grad-ucgg-generated)\" />");
        builder.Append("</svg>");
        var bytes = System.Text.Encoding.UTF8.GetBytes(builder.ToString());
        return Convert.ToBase64String(bytes);
    }

公共字符串GetGradientCss（字符串topColor、字符串bottomColor）
{
var builder=新的StringBuilder（）；
AppendLineFormat（“背景：url（数据：image/svg+xml；base64，{0}；”，GetBase64EncodedBackground（topColor，bottomColor））；
}
私有字符串GetBase64EncodedBackground（字符串顶部颜色、字符串底部颜色）
{
var builder=新的StringBuilder（）；
生成器。追加（“”）；
生成器。追加（“”）；
生成器。追加（“”）；
builder.AppendFormat（“，topColor”）；
builder.AppendFormat（“，bottomColor”）；
生成器。追加（“”）；
生成器。追加（“”）；
生成器。追加（“”）；
var bytes=System.Text.Encoding.UTF8.GetBytes（builder.ToString（））；
返回Convert.tobase64字符串（字节）；
}

数据是非常简单的SVG文件（XML），用于指定梯度：

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#1e5799" stop-opacity="1"/>
    <stop offset="100%" stop-color="#7db9e8" stop-opacity="1"/>
  </linearGradient>
  <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />
</svg>

因此，应采取以下步骤：

• 使用您的颜色生成上面的有效XML（

  XDocument

  或LINQ to XML）
• 将xml保存到

  MemoryStream

• 将流的

  .ToArray（）

  转换为Base64
• 构造Uri。（即使字符串连接也可以，但请尝试

  UriBuilder

  ）

---

它仍然是一个字节数组的base64表示形式——在本例中，从外观上看，它是一些SVG。那么你有SVG内容吗？你能澄清一下你需要什么吗？如果你对URI进行base64解码，你会得到一些包含SVG指令的XML…@JonSkeet:生成器的输入只是两个十六进制颜色代码。我不确定该工具用于base64编码的是什么。这可能是我问题的核心。@im1dermike:它所做的远远不止base64编码。它首先生成SVG，然后对其进行base64编码。谢谢！！这应该可以做到。或者只需使用带有两个参数（两个十六进制值）的模板字符串，然后使用

编码.UTF8.GetBytes（text）

和base64编码。只有@JonSkeet可以使用字符串连接创建有效的XML/格式：）。。。但事实上，在这种情况下也没关系。@AlexeiLevenkov:是的，我通常不会建议这样做。但是，当唯一要替换的值是这个众所周知的值时，它似乎是一个简单的解决方案：）@im1dermike：我建议使用

string.Format

和逐字字符串文字（可能使用

”

，而不是

“

，为了简单起见，它无处不在）-比一堆StringBuilder调用要清晰得多。