Question

我已经构建了一个CSS生成器应用程序，用户可以在其中选择渐变的两个停靠点，它会吐出相应的CSS。我正在使用Ultimate CSS Gradient Generator应用作为指南。这是它为＃1e5799吐出的CSS - ＆gt;支持IE9的＃7db9e8渐变：

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的第二种颜色代码外，我可以轻松替换所有样式的HEX颜色代码。由于这个应用程序是在C＃中，我需要弄清楚如何在这种风格中使用base64编码的data字符串。当内存或文件系统中有实际图像时，我发现链接怎么做，但这不是图像，而是渐变。

我需要知道，在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);
    }

Answer 1

数据是非常简单的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>

采取步骤：

使用您的颜色（XDocument或LINQ-to-XML）生成有效的XML
将xml保存到MemoryStream
将流.ToArray()转换为Base64
构建Uri。（甚至字符串连接也没问题，但请尝试UriBuilder）

C＃如何base64编码背景渐变

1 个答案: